⚠️ 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 skin="info" to display a standard message. This is the default skin.
Use skin="accent" to display a standout or brand callout.
Use skin="promo" to display promotional content such as a discount.
Use skin="error" to display an error status or issues, such as an item being out of stock.
Use skin="warning" to display a warning status or message.
Use skin="success" to display a positive or success message.
Use skin="holiday" only for holiday campaigns.
Use skin="help" to display a CARE-related message.
⚠️ skin="standard" is deprecated in SWAN v3.3
Use the skin="info" instead, which aligns with new semantic roles on SWAN components.
⚠️ skin='announcement' deprecated in SWAN v3.3
Use skin='accent' instead, which aligns with new semantic roles on SWAN components.
Use skin="announcement" to display an announcement.
⚠️ skin='new' deprecated in SWAN v3.3
Use skin='accent' instead, which aligns with new semantic roles on SWAN components.
Use skin="new" to promote a new product or service launched within the last 6 months.
⚠️ skin='discount' deprecated in SWAN v3.3
Use skin='promo' instead, which aligns with new semantic roles on SWAN components.
Use skin="discount" to promote a discounted product or service.
⚠️ skin='foil' deprecated in SWAN v3.3
No direct replacement, use a different skin that will suit your needs.
Use skin="foil" to promote foil printing on a product.
⚠️ variant="overlay" is deprecated in SWAN v3.3
Use the variant="standard" instead, which aligns with new semantic roles on SWAN components.
Use variant="overlay" to add a white background to the Callout. This is useful when the callout is positioned over an image to ensure the label is legible.
Use variant="inverse" to inverse the colours in the Callout. This is useful when you want to make the callout more noticeable on the page.
⚠️ size is deprecated in SWAN v3.3
The component now automatically handles sizing based on the selected mode(standardMode/compactMode). Please update your implementation to rely on the new mode-based sizing.
Use size="mini" for a smaller Callout.
⚠️ border is deprecated in SWAN v3.3
No direct replacement for better semantic roles on SWAN components.
Use border="none" for a borderless Callout.
holiday skin to communicate an error status because it is red. Use the error skin.skin to communicate anything other then a new product or service.holiday skin for seasonal Holiday campaigns.new Callouts for products launched within the last 6 months.<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.| prop | type | required | description | default |
|---|---|---|---|---|
| size | "standard" | "mini" | null | false | ⚠️ Deprecated - This is deprecated without a replacement.
The size variation | standard |
| border | "standard" | "none" | null | false | ⚠️ Deprecated - The 'border' prop is no longer being supported. | standard |
| skin | "standard" | "info" | "accent" | "success" | "warning" | "error" | "help" | "promo" | "holiday" | "foil" | "new" | "announcement" | "discount" | null | false | The visual style of the Callout
The 'foil', 'new' and 'announcement' skins are deprecated; use 'accent' instead
The 'discount' skin is deprecated; use 'promo' instead
The 'standard' skin is deprecated; use 'info' instead | info |
| variant | "standard" | "overlay" | "inverse" | null | false | The type of callout
'overlay' variant is deprecated | standard |
