Storybook
  • Theme

  • Light
  • Dark
  • System
  • Light tone

  • Light
  • Light high contrast
  • Light colorblind
  • Light Tritanopia
  • Dark tone

  • Dark
  • Dark dimmed
  • Dark high contrast
  • Dark colorblind
  • Dark Tritanopia
  • Reset to default

Alert

Flash alert informs users of successful or pending actions.

Basic alert

Flash message.

States

Default
Info
Success
Warning
Error

With icons

Info
Success
Warning
Error

With large icon

Use flex utility classes to align icon and text. Optionally use class f4 for larger text.
Success
Larger text

With dismiss

Info
Success
Warning
Error

With action button

Info
Success
Warning
Error

Full width

Full width

Multiline message

Line 1

Line 2

Stacked messages

Message 1
Message 2
Rest of content