Notification
A notification / alert box. Tabs: Content, Styling, Animations, Advanced.
A green or red bar says "success" or "error" to most people — but not to colour-blind users or screen readers. Always pair colour with text or an icon that states the meaning. For a message that appears dynamically, a live region (role="status" for info, role="alert" for errors) makes assistive tech announce it. MDN: ARIA live regions
Live demo​
▶ See the Notification live on the demos site — an interactive example you can click through.
Content​
| Option | Choices |
|---|---|
| Message | The alert text |
| Custom Label | Optional leading label |
| Type | Primary, Secondary, Success, Information, Warning, Danger, Light, Dark |
| Border Style | Filled (default), Outline (transparent background), Accent Left Border |
| Icon / Custom Icon (Emoji / SVG) | Leading icon |
| Layout Style | Inline (single row), Stacked (label above message) |
| Dismissible | On/Off |
| Auto-dismiss Seconds | Auto-hide after N seconds |
Capture the 8 Types, 3 Border Styles, and 2 Layout Styles, e.g.
notification-success-filled, notification-warning-outline, notification-danger-accent,
notification-stacked.
Styling​
Text, Label, Message and Icon colors, Background Color, and Margin & Padding.