Skip to content
Change the site theme
Figma
(information)

Callout

Peer review pending

A Callout is a banner that highlights important information on a page.


Guidelines

Guidelines page anchor

About Callout

About Callout page anchor

Use a Callout to highlight important, static information in a page of text. Callouts should not be used to provide feedback to a user or alert them to a change in the system. If the information is not static, use a Toast or Alert instead.

We recommend Callouts have a CalloutHeading so that the information is easier to navigate to for people who use screen readers. The CalloutHeading's level should be set appropriately with the as prop. It is important to not skip one or more heading levels as it is common for screen readers to build an outline of the page and assist users as they navigate a page.

There are five variants of Callouts: neutral, success, warning, error, and new. Each variant includes an icon.

Callouts are for important, static information on the page. If it is not static, use a Toast or Alert instead.

To internationalize the icon label for a variant, simply pass the i18nLabel prop.

Callouts can have lists of information within them. Use the CalloutList and CalloutListItem components to make sure the text is the appropriate color for the variant.

Callouts can be inline with text, so use the marginY prop to add a vertical margin. To add a margin only one side, wrap the Callout in a Box to style it further.

Installation

Installation page anchor
yarn add @twilio-paste/callout - or - yarn add @twilio-paste/core
import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/core/callout';
const ExampleCallout = () => (
<Callout variant="neutral">
<CalloutHeading>Heads up!</CalloutHeading>
<CalloutText>This is some information you need to know.</CalloutText>
</Callout>
);
Callout
Callout page anchor
PropTypeDescriptionDefault
children?React.ReactNodeChild components to render into the Callout
variant'neutral', 'warning', 'error', 'success', 'new'The variant of Callout to render
marginYResponsiveValue<keyof ThemeShape['space']>Any of our space tokens'space0'
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CALLOUT'
i18nLabel?stringIcon label text. The default depends on the variant.'(error)', '(information)', '(warning)', '(error)', '(success)', '(new)'
PropTypeDescriptionDefault
children?React.ReactNodeChild components to render into the heading
as'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'label', 'span', 'header'The HTML element to render'h3'
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CALLOUT_HEADING'
PropTypeDescriptionDefault
children?React.ReactNodeChild components to render into the paragraph
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CALLOUT_TEXT'
PropTypeDescriptionDefault
children?React.ReactNodeChild components to render into the list
as'ol', 'ul'The type of list to render
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CALLOUT_LIST'
PropTypeDescriptionDefault
children?React.ReactNodeChild components to render into the list item
element?stringOverrides the default element name to apply unique styles with the Customization Provider'CALLOUT_LIST_ITEM'
(information)
Figma usage guidelines coming soon

You can find the Callout component in the Paste Components library(link takes you to an external page).


Black lives matter.