Price Bar
Displays price information and related content during the product flow.
styleKeys: priceBar
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.
accessibleText is deprecated in SWAN 3.24. This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system and remove this prop.
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
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-mainelement, and give the Price Barposition: fixedorposition: stickyin your CSS, along with an appropriate CSS value such asbottom: 0. If you useposition: 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 pinned to the bottom of the window, place it in the page HTML as a direct child of the
- 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-mainelement, and give the Price Barposition: stickyin your CSS, along with an appropriate CSS value such astop: 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 segmentsPriceBarMain- 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 segmentsPriceBarMain- wrapper for the price, quantity, and main button
Banner
Inside of the PriceBarBanner there are 1 or more PriceBarBannerSegments.
Inside of each PriceBarBannerSegment there are sub-components:
PriceBarBannerSegmentImage- image element withsrc,alt, ...PriceBarBannerSegmentText- element to hold the segment text. Rendered asdivby 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 iconPriceBarPriceInfoPriceBarInfoDetails- wrapper for VAT info and a button
PriceBarButtons- wrapper for quantity and main buttonsPriceBarQuantity- wrapper for the quantity button (if the button opens a "panel" modal dialog)Dropdown- if the quantity button is a simple dropdown insteadPriceBarMainButton- main button for forward progression in the flow
Inside of the PriceBarInfoDetails there are more sub-components:
PriceBarVat- VAT information (do not use withPriceBarCouponCallout)PriceBarCouponCallout- Coupon information (do not use withPriceBarVat)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 buttonPriceBarQuantityAmount- 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.
- If you’re not using SWAN’s i18n system, provide the
accessibleTextforPriceBarPriceInfothe screen readers.
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.
| prop | type | required | description | default |
|---|---|---|---|---|
| width | "standard" | "full-width" | "wide" | null | false | The width variation | standard |
| size | "standard" | "mini" | null | false | ⚠️ Deprecated - This is deprecated without a replacement.
The size variation | standard |
| specialVariant | "standard" | "design-path" | null | false | Variations for special cases | standard |
| iconPosition | "left" | "right" | null | false | The position of the icon in the Button | null |
| buttonShape | "standard" | "round" | null | false | ⚠️ Deprecated - Use `IconButton` component for creating icon-only buttons
The shape of the Button - use `round` for icon buttons | standard |
| skin | "link" | "primary" | "secondary" | "unstyled" | "tertiary" | "clear-selection" | "destructive-primary" | "destructive-secondary" | "destructive-tertiary" | null | false | 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.
| prop | type | required | description | default |
|---|---|---|---|---|
| accessibleText | string | null | false | ⚠️ Deprecated - This prop will be removed in favor of SWAN's i18n system. Please opt in to the i18n system for continued support.
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.
| prop | type | required | description | default |
|---|---|---|---|---|
| showBannerOnly | boolean | null | false | ⚠️ Deprecated - This is no longer supported for consistent user experience | false |
How does Price Bar meet your needs?
Related