<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Price Bar

Displays price information and related content during the product flow.
styleKeys: priceBar
Warning:

⚠️ Some props/prop values deprecated in SWAN v3.3
Refer to the information on props/prop values provided further down this page. Find more information and migration documentation in the Deprecation roadmap.

Use Price Bar...

  • To display price information and related content during the product flow.

Use the default version to enable quantity configuration, which opens a Modal Dialog panel.

The preview has been updated.

With a Listbox

Use Listbox to enable quantity configuration without opening a Modal Dialog panel.

The preview has been updated.

With a Dropdown

Use Dropdown to enable quantity configuration in a dropdown.

The preview has been updated.

Coupon callout

Use PriceBarCouponCallout to display a coupon.

The preview has been updated.

"show banner" option

Warning:

⚠️ showBannerOnly is deprecated in SWAN v3.3
No direct replacement for better semantic roles on SWAN components.

By default, the banner segments will be hidden on Small and Extra-Small screens. However, an adaptive design might require the banner segments to be shown elsewhere on the page, separate from the regular Price Bar.

In this case, you can use showBannerOnly to create a second Price Bar in another location on the page, which will feature only the banner segments on all screens.

The preview has been updated.

Implementation

  • The Price Bar is typically pinned or sticky to the top or the bottom of the page. The component can't do this automatically, because it doesn't know which element you want it to be pinned to, so you will need to pin it yourself. Typically this involves:
    • If you want the bar pinned to the bottom of the window, place it in the page HTML as a direct child of the <body> tag or the.site-main element, and give the Price Bar position: fixed or position: sticky in your CSS, along with an appropriate CSS value such as bottom: 0. If you use position: fixed, you will likely want to place some empty space at the bottom of that parent element so that the Price Bar does not overlap other page content when the page is scrolled down all the way.
  • If you want the bar sticky to the top of the window, place it in the page HTML as a direct child of the.site-main element, and give the Price Bar position: sticky in your CSS, along with an appropriate CSS value such as top: 0.
  • You can also place a Price Bar inside a modal dialog, using instructions similar to those above.

The React API PriceBar component is composed of a number of sub-components. PriceBar itself typically has two children:

  • PriceBarBanner - wrapper for the banner segments
  • PriceBarMain - wrapper for the price, quantity, and main button

The React PriceBar component is composed of a number of sub-components. PriceBar itself typically has two children:

  • PriceBarBanner - wrapper for the banner segments
  • PriceBarMain - wrapper for the price, quantity, and main button

Inside of the PriceBarBanner there are 1 or more PriceBarBannerSegments.

Inside of each PriceBarBannerSegment there are sub-components:

  • PriceBarBannerSegmentImage- image element with src, alt, ...
  • PriceBarBannerSegmentText- element to hold the segment text. Rendered as div by default.

Main

Inside of the PriceBarMain there are more sub-components:

  • PriceBarMainInfo- wrapper for price, VAT information, and a "link"
    • PriceBarPrice - price with currency, wrapper for info icon PriceBarPriceInfo
    • PriceBarInfoDetails- wrapper for VAT info and a button
  • PriceBarButtons- wrapper for quantity and main buttons
    • PriceBarQuantity- wrapper for the quantity button (if the button opens a "panel" modal dialog)
    • Dropdown- if the quantity button is a simple dropdown instead
    • PriceBarMainButton- main button for forward progression in the flow

Inside of the PriceBarInfoDetails there are more sub-components:

  • PriceBarVat- VAT information (do not use with PriceBarCouponCallout)
  • PriceBarCouponCallout- Coupon information (do not use with PriceBarVat)
  • PriceBarLink- a button that looks like a link, leading to more information

Inside of the PriceBarQuantity there are more sub-components:

  • PriceBarQuantityLabel- optional label for the button
  • PriceBarQuantityAmount- text for inside the quantity button

Accessibility

  • Any Dropdown inside a Price Bar is still bound by the Dropdown's accessibility considerations — notably, that the dropdown needs an accessible labelling element, even if that element is visually hidden.
  • For PriceBarPriceInfo, provide the accessibleText for the screen readers.

Banner icons should be 30 pixels tall.

Props

PriceBarBannerSegmentImage
This component is implemented using the <img /> as the root element. You can utilize the native attributes supported by <img /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBarBannerSegmentText
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBarBannerSegment
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBarBanner
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBarButtons
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBarCouponCallout
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBarInfoDetails
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBarLink
This component is implemented using the <button /> as the root element. You can utilize the native attributes supported by <button /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBarMainButton
This component is implemented using the <button /> as the root element. You can utilize the native attributes supported by <button /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
width"standard" | "full-width" | "wide" | nullfalse
The width variation
null
size"standard" | "mini" | nullfalse
⚠️ Deprecated - This is deprecated without a replacement.
The size variation
null
specialVariant"standard" | "design-path" | nullfalse
Variations for special cases
standard
iconPosition"left" | "right" | nullfalse
The position of the icon in the Button
null
buttonShape"standard" | "round" | nullfalse
The shape of the Button
standard
skin"link" | "primary" | "secondary" | "unstyled" | "tertiary" | "clear-selection" | nullfalse
The visual style of the Button
primary
PriceBarMainInfo
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBarMain
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBarPriceInfo
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
accessibleTextstring | nullfalse
Provide the text that should be used for screen readers.
null
PriceBarPrice
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBarQuantityAmount
This component is implemented using the <span /> as the root element. You can utilize the native attributes supported by <span /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBarQuantityLabel
This component is implemented using the <label /> as the root element. You can utilize the native attributes supported by <label /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBarQuantity
This component is implemented using the <button /> as the root element. You can utilize the native attributes supported by <button /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBarVat
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
PriceBar
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
showBannerOnlyboolean | nullfalse
⚠️ Deprecated - This is no longer supported for consistent user experience
By default, the banner segments will be hidden on Small and Extra-Small screens. However, an adaptive design might require that for these screens, the banner be shown elsewhere on the page, separate from the regular Price Bar. In this case, you can create a second Price Bar in a second location on the page, set this option to true, which will force that PriceBar to show its banner (and only its banner) on all screens.
null

Related

Was this page useful?

Thanks for your feedback!

Feel free to include your name if you wish to have a follow up conversation.

Published: Jan 31, 2022Last updated: Sep 3, 2024
Previous
Popover
Popover
Next
Pricing
Pricing