Alert
An Alert displays relevant contextual information to users.
Overview
Alert Text
When to use
- To provide ephemeral or additional information in a specific context.
- To warn the user of critical informations.
- To communicate when the user flow/experience changes without an explicitly taken action from the user.
When not to use
- To warn the user of an irreversible action he is about to take or critical informations. (Use dialog instead)
- Whenever we need to have a confirmation from the user that he has seen the message.
- To communicate confirmations and temporary notifications. (Use toast instead)
Anatomy
- Background: Wraps the content.
- Icon: Helps indicate which type of message it is.
- Title: Provide a short version of the context of the message.
- Description: Alert content.
- Actions (optional): Buttons used to provide quick options on the alert context, or a link to navigate the user into a more detailed context.
- Close button (optional): Dismisses the alert.
Building Guidelines
- Alerts width may be set manually, if not, it always extend the parent's available width.
- Alerts has a minimum width of 328 px.
- Alerts can be dismissible or permanent.
- Alert Icon is dynamic and may be changed according to each context.
Layout
Default
Title
Alert Text
Default alerts contain a text section on top and an action section below. It may also have a title as an optional addon.
Inline
Alert Text
Inline alerts accommodates all content in a single row, suitable for small amount of texts and occupies little vertical space to fit between sections on a layout.
Icons
Title
Alert Text
Alerts may have icons to complement the context of the message, default alerts has their icon aligned to the top of the alert.
Alert Text
Inline alerts has their icon vertically aligned to the middle.
Buttons
Action Buttons
Title
Alert Text
Buttons on default alerts are aligned to the bottom right of the container.
Alert Text
Buttons on inline alerts are aligned to the right (vertically centered).
Dismiss
Title
Alert Text
Default alerts have the dismiss button at the top right end like a normal window.
Alert Text
Inline alerts have the dismiss button at the right end (centered vertically). If the alert has buttons, it will be pushed to the left.
Types
Neutral
Title
Alert Text
Should be used when the message is neutral in tone or when its semantics do not fit any of the other variants.
Informative
Title
Alert Text
Should be used for when the message needs to call extra attention, as compared to the neutral variant.
Negative
Title
Alert Text
Should be used for more recurring errors that must be reported without interrupting the user.
Controls
Interactive controls are available in Storybook. Open Storybook
Props
Token mapping
| Type | Tailwind class | Token | Value (dark theme) |
|---|---|---|---|
| neutral | bg-alert-neutral | --color-bg-alert-neutral | #192224 (gray-800) |
| informative | bg-alert-informative | --color-bg-alert-informative | #15352d (dark-green) |
| negative | bg-alert-negative | --color-bg-alert-negative | #502626 (darker-terracota) |
| all | text-foreground | --color-text-primary | #e8edeb (gray-50) |
| action button | bg-primary | --color-accent-primary | #37bb89 (accent-green) |
Changelog
| Date | Change |
|---|---|
| 2026-03-22 | Migrated to shadcn pattern (CVA + Tailwind); Win95 beveled borders; icons switched from Phosphor to @react95/icons; action button now uses <Button> component |
| 2026-03-15 | Initial component — Alert with Default/Inline layouts, Neutral/Informative/Negative types, icon, action button and dismiss support |