Some props/prop values deprecated in SWAN v3.3 and v3.4
Refer to the information on props/prop values provided further down this page. Find more information and migration documentation in the Deprecation roadmap.
Callout
A status label that calls attention to a product or service.
Use Callout...
- To call attention to a product or service.
Don't use Callout...
- To display a selection. Use Clear Selection Button instead.
Skin
Info
Use skin="info" to display a standard message. This is the default skin.
Accent
Use skin="accent" to display a standout or brand callout.
Promo
Use skin="promo" to display promotional content such as a discount.
Error
Use skin="error" to display an error status or issues, such as an item being out of stock.
Warning
Use skin="warning" to display a warning status or message.
Success
Use skin="success" to display a positive or success message.
Holiday
Use skin="holiday" only for holiday campaigns.
Help
Use skin="help" to display a CARE-related message.
Skin (deprecated)
Standard
skin="standard" is deprecated in SWAN v3.3
Use the skin="info" instead, which aligns with new semantic roles on SWAN components.
Announcement
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.
New
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.
Discount
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.
Foil
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.
Emphasis
Use emphasis="low" for more subtle Callouts.
Variant
variant prop is deprecated in SWAN v3.4
For variant=inverse, omit the prop to use the standard styling instead. For variant=overlay use emphasis=low instead.
Overlay
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.
Inverse
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. This is the default styling as of v3.4 and is no longer necessary
Size
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.
Mini
Use size="mini" for a smaller Callout.
Border
border is deprecated in SWAN v3.3
No direct replacement for better semantic roles on SWAN components.
Use border="none" for a borderless Callout.
Purpose
- Use the skin that matches the purpose of the messaging, not the visual style.
- For example, don’t use the
holidayskin to communicate anerrorstatus because it is red. Use the error skin. - Don’t use the capitalized new
skinto communicate anything other then a new product or service. - Only use the
holidayskin for seasonal Holiday campaigns.
Content
- Use clear, concise labels no more the 14 characters in length.
If there is not enough room to display the entire component, the label will truncate into ellipses. - Use
newCallouts for products launched within the last 6 months. - Use Callouts with a "Top Rated" label only for products with a rating of 3.5 stars or more.
- Use Callouts with a "Up to NN% Off" only for product "Red" sales.
Placement
- When used on Standard Tiles, Callouts are usually positioned in the top left corner.
- Position Callouts in a consistent location on related UI elements.
Props
Callout
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.
| 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 | ⚠️ Deprecated - The `variant` prop is no longer supported. Use `emphasis=low` for "overlay"; omit or use `variant=standard` for "inverse". | standard |
| emphasis | "standard" | "low" | null | false | The level of emphasis of the callout | standard |
How does Callout meet your needs?
