Callout | Components

Callout

A status label that calls attention to a product or service.

UsageGuidelinesAPI

Use Callout...

To call attention to a product or service.

Don't use Callout...

To display a selection. Use Clear Selection Button instead.

ReactVanilla

<Callout>Callout</Callout>

<Callout>Callout</Callout>

<span class="swan-callout">Callout</span>

<span class="swan-callout">Callout</span>

Skin

Info

Use skin="info" to display a standard message. This is the default skin.

ReactVanilla

<Callout skin="info">Info</Callout>

<Callout skin="info">Info</Callout>

<div class="swan-callout swan-callout-skin-info">Info</div>

<div class="swan-callout swan-callout-skin-info">Info</div>

Accent

Use skin="accent" to display a standout or brand callout.

ReactVanilla

<Callout skin="accent">Accent</Callout>

<Callout skin="accent">Accent</Callout>

<div class="swan-callout swan-callout-skin-accent">Accent</div>

<div class="swan-callout swan-callout-skin-accent">Accent</div>

Use skin="promo" to display promotional content such as a discount.

ReactVanilla

<Callout skin="promo">Promo</Callout>

<Callout skin="promo">Promo</Callout>

<div class="swan-callout swan-callout-skin-promo">Promo</div>

<div class="swan-callout swan-callout-skin-promo">Promo</div>

Error

Use skin="error" to display an error status or issues, such as an item being out of stock.

ReactVanilla

<Callout skin="error">Error</Callout>

<Callout skin="error">Error</Callout>

<div class="swan-callout swan-callout-skin-error">Error</div>

<div class="swan-callout swan-callout-skin-error">Error</div>

Warning

Use skin="warning" to display a warning status or message.

ReactVanilla

<Callout skin="warning">Warning</Callout>

<Callout skin="warning">Warning</Callout>

<div class="swan-callout swan-callout-skin-warning">Warning</div>

<div class="swan-callout swan-callout-skin-warning">Warning</div>

Success

Use skin="success" to display a positive or success message.

ReactVanilla

<Callout skin="success">Success</Callout>

<Callout skin="success">Success</Callout>

<div class="swan-callout swan-callout-skin-success">Success</div>

<div class="swan-callout swan-callout-skin-success">Success</div>

Help

Use skin="help" to display a CARE-related message.

ReactVanilla

<Callout skin="help">Help</Callout>

<Callout skin="help">Help</Callout>

<div class="swan-callout swan-callout-skin-help">Help</div>

<div class="swan-callout swan-callout-skin-help">Help</div>

Deprecated skins

Standard

skin="standard" is deprecated in SWAN v3.3
Use the skin="info" instead, which aligns with new semantic roles on SWAN components.

ReactVanilla

<Callout skin="standard">Standard</Callout>

<Callout skin="standard">Standard</Callout>

<div class="swan-callout swan-callout-skin-standard">Standard</div>

<div class="swan-callout swan-callout-skin-standard">Standard</div>

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.

ReactVanilla

<Callout skin="announcement">Announcement</Callout>

<Callout skin="announcement">Announcement</Callout>

<div class="swan-callout swan-callout-skin-announcement">Announcement</div>

<div class="swan-callout swan-callout-skin-announcement">Announcement</div>

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.

ReactVanilla

<Callout skin="new">New</Callout>

<Callout skin="new">New</Callout>

<div class="swan-callout swan-callout-skin-new">New</div>

<div class="swan-callout swan-callout-skin-new">New</div>

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.

ReactVanilla

<Callout skin="discount">Discount</Callout>

<Callout skin="discount">Discount</Callout>

<div class="swan-callout swan-callout-skin-discount">Discount</div>

<div class="swan-callout swan-callout-skin-discount">Discount</div>

Emphasis

Use emphasis="low" for more subtle Callouts.

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.

ReactVanilla

<Callout skin="foil">Foil</Callout>

<Callout skin="foil">Foil</Callout>

<div class="swan-callout swan-callout-skin-foil">Foil</div>

<div class="swan-callout swan-callout-skin-foil">Foil</div>

Holiday

skin='holiday' deprecated in SWAN v3.23

SWAN will no longer provide marketing color values in order to align with our new brand colors. They can still be accessed through @vp/marketing-colors, but should only be used by Contentful-authored content.

Use skin="holiday" only for holiday campaigns.

ReactVanilla

<Callout skin="holiday">Holiday</Callout>

<Callout skin="holiday">Holiday</Callout>

<div class="swan-callout swan-callout-skin-holiday">Holiday</div>

<div class="swan-callout swan-callout-skin-holiday">Holiday</div>

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.

ReactVanilla

<Callout variant="overlay">Overlay</Callout>

<Callout variant="overlay">Overlay</Callout>

<span class="swan-callout swan-callout-overlay">Overlay</span>

<span class="swan-callout swan-callout-overlay">Overlay</span>

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

ReactVanilla

<Callout variant="inverse">Inverse</Callout>

<Callout variant="inverse">Inverse</Callout>

<span class="swan-callout swan-callout-inverse">Inverse</span>

<span class="swan-callout swan-callout-inverse">Inverse</span>

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.

ReactVanilla

<Callout size="mini">Mini</Callout>

<Callout size="mini">Mini</Callout>

<span class="swan-callout swan-callout-mini">Mini</span>

<span class="swan-callout swan-callout-mini">Mini</span>

Border

border is deprecated in SWAN v3.3

There is no direct replacement as this visual style has been removed.

Use border="none" for a borderless Callout.

ReactVanilla

<Callout border="none">Borderless</Callout>

<Callout border="none">Borderless</Callout>

<span class="swan-callout swan-callout-borderless">Borderless</span>

<span class="swan-callout swan-callout-borderless">Borderless</span>

Purpose

Use the skin that matches the purpose of the messaging, not the visual style.
For example, don’t use the holiday skin to communicate an error status because it is red. Use the error skin.
Don’t use the capitalized new skin to communicate anything other then a new product or service.
Only use the holiday skin for seasonal Holiday campaigns.

Content

Use clear, concise labels no more than 14 characters in length.
Use new Callouts 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
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
size	`"standard" \| "mini" \| null`	false	⚠️ Deprecated - This is deprecated without a replacement. The size variation	standard
skin	`"standard" \| "info" \| "accent" \| "success" \| "warning" \| "error" \| "help" \| "promo" \| "holiday" \| "announcement" \| "discount" \| "new" \| "foil" \| 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. The 'holiday' skin is deprecated without a replacement.	info
emphasis	`"standard" \| "low" \| null`	false	The level of emphasis of the callout	standard
border	`"standard" \| "none" \| null`	false	⚠️ Deprecated - The 'border' prop is no longer being supported.	standard