Skip to content
Alert
Overview
An alert overlay component that displays content in a floating panel that can be positioned at different corners of the screen. Supports auto-close functionality with visual progress indicator, customizable appearance, and responsive behavior.
Common use cases
- Use for temporary notifications, messages, or calls-to-action
- Keep content concise as the alert has limited space
- Consider accessibility when choosing colors and auto-close timing
- Display important announcements or promotional messages
- Provide user feedback for actions
Compatible blocks
The following blocks can be nested within this block:
- Container (for alert content)
Block settings
General
| Setting | Description | Options |
|---|---|---|
| Show advanced settings | Reveals 8 advanced options including show close button, type, and more | Checkbox (default: false) |
Content
| Setting | Description | Options |
|---|---|---|
| Overlay preset | Select a preset overlay ID or use a custom one | • Account |
| Overlay ID | Custom identifier for the overlay (used to trigger it programmatically) | Text input |
| Show close button | Displays a close button in the alert | Checkbox (default: false) Visible when Show advanced settings is on |
| Enable auto close | Automatically closes the alert after a set duration | Checkbox (default: false) Visible when Show advanced settings is on |
| Auto close duration | Time before the alert automatically closes | 1 - 10 s (default: 3) Visible when Enable auto close is on and Show advanced settings is on |
Color
| Setting | Description | Options |
|---|---|---|
| Type | Custom scheme vs preset surface colors | • Custom Visible when Show advanced settings is on and Enable inheritance is off |
| Color scheme | Background and text pairing | Color scheme picker Visible when type is Custom, Show advanced settings is on, and Enable inheritance is off |
| Color scheme | Background and text pairing | • Body background (default) Visible when type is Base, Show advanced settings is on, and Enable inheritance is off |
| Border color | Alert border | • Subtle (default) Visible when Show advanced settings is on, type is Base, and Enable inheritance is off |
| Enable inheritance | Inherit colors from the closest parent with a set scheme | Checkbox (default: false) |
Layout
| Setting | Description | Options |
|---|---|---|
| Horizontal position | Position of the alert along the horizontal axis | • Left |
| Vertical position | Position of the alert along the vertical axis | • Top (default) |
Display
| Setting | Description | Options |
|---|---|---|
| Visibility | Controls when the block is visible | • All (default) Visible when Show advanced settings is on |