Figma
Star459

Callout

Version 4.1.0GithubStorybookPeer review pending

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

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 as="h2">Heads up!</CalloutHeading>
    <CalloutText>This is some information you need to know.</CalloutText>
  </Callout>
);

variant RequiredRequired

Type
CalloutVariants
Default
null

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'CALLOUT'

i18nLabel

Accessible label for the Callout icon.

Type
string
Default
'(neutral)' | '(warning)' | '(error)' | '(success)' | '(new)'

marginY

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 28 more ... | "auto"
Default
null

as

Type
AsTags
Default
h3

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
CALLOUT_HEADING

as RequiredRequired

Type
AsTags
Default
null

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
CALLOUT_LIST

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
CALLOUT_LIST_ITEM

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
CALLOUT_TEXT

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.