Alert

A notice on a status surface, with a title, details, an icon and an action, in the same types, variants and emphasis levels as the web Alert.

Set type to success, info, warning or error for a status color, or to default for a neutral alert with no status.

Set variant to filled to drop the border, or leave it at outlined (the default) to keep it, and the tinted background stays the same.

Set emphasis to subtle for a neutral fill with no border, or to strong to fill the alert with its status color.

Set type="default" for an alert with no status color at any emphasis, where strong fills it with the text color.

Add a description under the title for the details, like what changed in a new version.

Pass a button in action to place it at the end of the alert, lined up with the title, like an Undo after archiving a message.

On an emphasis="strong" fill a link takes the alert's text color and gets className="underline", while a button in action keeps its own colors.

Set showIcon to add the status icon in front of the title, which is off by default outside a banner.

Pass an icon name in icon with showIcon to replace the status icon, like a reload glyph while files sync.

Set banner for a full-width strip with no border, square corners and a warning icon, for a notice across the top of an email.

The component inside real screens, with the components it usually sits beside.

A failed-payment email with a danger-colored Retry button in the alert's action.

A billing email about an expiring card, with an Update button in the alert and the email's own fine print under it.

On This Page