# 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](https://help.brickspacelab.com/slab/content/blocks/layout/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 • Search • Menu • Primary cart • Alternative cart • Age verification • Form response • Discount • Error • Quick buy • Quick edit • Custom (default)
|
| Overlay ID | Custom identifier for the overlay (used to trigger it programmatically) |
Text input
Visible when overlay preset is "Custom"
|
| 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 true
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 • Base (default)
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) • Body foreground • Accent 1–3 • Shade 1–3 • Blur • Transparent
Visible when type is Base, Show advanced settings is on, and Enable inheritance is off
|
| Border color | Alert border |
• Subtle (default) • Strong • None
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)
Visible when Show advanced settings is on
|
### Layout
| Setting | Description | Options |
| ------------------- | ----------------------------------------------- | ---------------------------------- |
| Horizontal position | Position of the alert along the horizontal axis |
• Left • Right (default)
|
| Vertical position | Position of the alert along the vertical axis |
• Top (default) • Bottom
|
### Display
| Setting | Description | Options |
| ---------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Visibility | Controls when the block is visible |
