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 the default version to enable quantity configuration, which opens a Modal Dialog panel.
Use Listbox to enable quantity configuration without opening a Modal Dialog panel.
The preview has been updated.
Use Dropdown to enable quantity configuration in a dropdown.
Use PriceBarCouponCallout to display a coupon.
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.
<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..site-main element, and give the Price Bar position: sticky in your CSS, along with an appropriate CSS value such as top: 0.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 buttonThe 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 buttonInside 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.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 PriceBarPriceInfoPriceBarInfoDetails- wrapper for VAT info and a buttonPriceBarButtons- 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 flowInside 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 informationInside of the PriceBarQuantity there are more sub-components:
PriceBarQuantityLabel- optional label for the buttonPriceBarQuantityAmount- text for inside the quantity buttonPriceBarPriceInfo, provide the accessibleText for the screen readers.Banner icons should be 30 pixels tall.
<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.<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.<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.<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.<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.<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.<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.<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.<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.| prop | type | required | description | default |
|---|---|---|---|---|
| width | "standard" | "full-width" | "wide" | null | false | The width variation | null |
| size | "standard" | "mini" | null | false | ⚠️ Deprecated - This is deprecated without a replacement.
The size variation | null |
| 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 | The shape of the Button | standard |
| skin | "link" | "primary" | "secondary" | "unstyled" | "tertiary" | "clear-selection" | null | false | The visual style of the Button | primary |
<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.<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.<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.| prop | type | required | description | default |
|---|---|---|---|---|
| accessibleText | string | null | false | Provide the text that should be used for screen readers. | null |
<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.<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.<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.<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.<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.<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.| prop | type | required | description | default |
|---|---|---|---|---|
| showBannerOnly | boolean | null | false | ⚠️ 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 |
