Skip to contentSkip to navigationSkip to topbar
Figma
Star

Alert

Version 14.1.0GithubStorybook

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

Installation

Installation page anchor
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>;

Alert

Alert page anchor

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