Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Callout

Version 4.2.2GithubStorybookPeer 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

Usage

Usage page anchor
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>
);

Props

Props page anchor

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'

i18nDismissLabel

Title for dismiss label. Only necessary when using onDismiss.

Type
string
Default
'Dismiss 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" | ... 39 more ... | "auto"
Default
null

onDismiss

Function to run on dismiss of the Callout. Adds a close button.

Type
() => void
Default
null

CalloutHeading

CalloutHeading page anchor

as

Type
AsTags
Default
h3

element

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

Type
string
Default
CALLOUT_HEADING

CalloutList

CalloutList page anchor

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

CalloutListItem

CalloutListItem page anchor

element

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

Type
string
Default
CALLOUT_LIST_ITEM

CalloutText

CalloutText page anchor

element

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

Type
string
Default
CALLOUT_TEXT