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
- Introduction
-
Components
- Action list
- Action menu
- Alert
- Avatar
- Blankslate
- Box
- Branch name
- Breadcrumb
- Button
- Button group
- Checkbox
- Checkbox group
- Circle badge
- Counter
- Dialog
- Drawer
- Dropdown
- Ellipsis
- Filter list
- Header
- Input validation message
- Label
- Layout
- Link
- Menu
- Octicon
- Pagination
- Progress
- Radio button
- Radio group
- Radio tabs
- Select
- Select menu
- Side nav
- Spinner
- State label
- Styled HTML
- Subhead
- Subnav
- Tabnav
- Text input
- Textarea
- Theme
- Theme menu
- Theme menu options
- Timeline
- Toggle switch
- Truncate
- Underline nav
Alert
Flash alert informs users of successful or pending actions.
-
Documentation
- alert
- alert_messages
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