Alert
Alert
Displays a dismissable notification message with configurable alert styles such as success, warning, danger, or info. Supports session-based or persistent dismissal via localStorage and includes an optional heading and rich text body.
Examples
Primary
This is a primary alert � check it out!Secondary
This is a secondary alert � additional context.Success
This is a success alert � well done!Danger
This is a danger alert � something went wrong!Warning
This is a warning alert � be careful!Info
This is an info alert � here is some information.Light
This is a light alert � subtle notification.Dark
This is a dark alert � used for neutral messaging.Control Properties
Alert Rendering Parameters:
- Alert Style (Droplink) – Selects the Bootstrap alert color variant (e.g., alert-primary, alert-danger, alert-success, alert-warning, alert-info, alert-light, alert-dark, alert-secondary).
- Dismissable (Checkbox, default: checked) – When enabled, renders a close button and persists dismissal state via localStorage or session storage.
- data-testid (Single-Line Text) – Sets a data-testid attribute for automated testing selectors.
- HeadingSize (Droplink) – Controls the CSS class applied to the optional alert heading.
Template Properties
The Alert component uses the Helium datasource template which provides:
The component also reads Message Trigger and Message Storage dictionary phrases to control dismissal persistence behavior (exit trigger vs. page load, localStorage vs. sessionStorage).
- Title (Single-Line Text) – Optional heading rendered above the alert body. Hidden if empty.
- Copy (Rich Text) – The main alert message body content.
The component also reads Message Trigger and Message Storage dictionary phrases to control dismissal persistence behavior (exit trigger vs. page load, localStorage vs. sessionStorage).