Skip to content

Alert

Alerts are used to communicate a state that affects a system, feature or page.

View sourceView theme sourceView storybook

Imports

Usage
Status
Change the status of the alerts by passing the status prop. This affects the
color scheme and icon used. Alert supports error, success, warning, and info
statuses.
Closable Alert
You can pass closable prop to make the alert closable and use onClose to
listen to the click listener.
Action Button
You can pass actionButtonLabel which would render a action button with the
provided text.
Composition & Customization
Alert is meant to be used with the single component API by passing props, like
title, description, but if you want to have more control over it's rendering
you can pass JSX children elements with Alert specific components.
  • AlertIcon
  • AlertBody
    • AlertTitle
    • AlertDescription
  • AlertActions
    • AlertActionButton
    • AlertCloseButton
You can also access the internal state/values via the render props pattern.
You'll get access to the passed down status prop & the internal theme
styles.