Storybook
  • Theme

  • Light
  • Dark
  • System
  • Dark tone

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

  • Light
  • Light high contrast
  • Light colorblind
  • Light Tritanopia
  • Reset to default

Alert

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