Skip to contentSkip to navigationSkip to topbar
Figma
Star

Callout

Version 4.1.0GithubStorybookPeer review pending

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

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

Callout

Callout page anchor

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