Paste assistant Assistant
Figma
Star

Alert

An Alert is a banner that notifies users to high-priority or time-sensitive information.

yarn add @twilio-paste/alert - or - yarn add @twilio-paste/core
import {Alert} from '@twilio-paste/core/alert';

const Component = () => <Alert variant="error">There is an error in the system.</Alert>;

variant RequiredRequired

Type
AlertVariants

element

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

Type
string
Default
'ALERT'

i18nDismissLabel

Title for dismiss label. Only necessary when using onDismiss.

Type
string
Default
'Dismiss alert'

i18nErrorLabel

Title for error icon when using Error Alerts.

Type
string
Default
'(error)'

i18nNeutralLabel

Title for info icon when using Neutral Alerts.

Type
string
Default
'(information)'

i18nWarningLabel

Title for info icon when using Warning Alerts.

Type
string
Default
'(warning)'

onDismiss

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

Type
() => void
Default
null

role

ARIA role applied to the Alert.

Type
string
Default
'status' for Neutral Alerts, 'error' for Error Alerts, 'warning' for Warning Alerts

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.