Components
Alert
An inline message in the page about its state: a warning before an action, the result of a save, a limit reached.
Playground
Your trial ends in 3 daysAdd a payment method to keep your projects.
Figma variant
Style=Information
✈️ Direction=Vertical
Description=True
CTA Buttons=True
Close Button=TrueStyles and directions
Five styles on the tone’s soft color. Vertical stacks the description and buttons under the title; Horizontal is a pill with everything on one line.
DefaultDescription
InfoDescription
SuccessDescription
ErrorDescription
WarningDescription
DefaultDescription
InfoDescription
SuccessDescription
ErrorDescription
WarningDescription
Tokens
| Style | Background | Icon |
|---|---|---|
| default | --color-surface-level-3 | --color-primary |
| info | --color-info-soft | --color-info |
| success | --color-success-soft | --color-success |
| error | --color-error-soft | --color-error |
| warning | --color-warning-soft | --color-warning |
| radius | --radius-form-element (Horizontal: --radius-full) | — |
| padding | --layout-tiny --layout-small --layout-tiny --layout-default | — |
Notes from Figma
- Every style uses the info icon; code does too, and takes another icon with icon.
- The Information icon is info/on-info, which is light on the light info-soft background; code uses info/info, as Toast does.
- The title and description texts have no color; code uses high and medium emphasis, as in Toast.
- Vertical CTA buttons are the tone’s solid small Button plus a tertiary one; Horizontal uses a ghost primary small Button.
Figma to code
| Figma | React |
|---|---|
| Style = Default / Information / Success / Error / Warning | tone='default' / 'info' / 'success' / 'error' / 'warning' |
| ✈️ Direction = Vertical / Horizontal | direction='vertical' / 'horizontal' |
| Description | description="…" |
| CTA Buttons (Button 01–03) | actions={<Button size="small" />…} |
| Close Button | onClose={…} |