Alert Banner
Usage
Alert Banners are persistent notifications displayed inline on a screen. Unlike toasts, they remain visible until dismissed or the condition changes.
YAML Export
1. Copy the YAML from the component view.
2. Paste it into your Canvas app.
3. Bind the Visible property to control when the banner appears.
4. Use actions for primary/secondary actions (e.g., "Learn More", "Dismiss").
When to Use Alert vs Toast
- Alert Banner: Persistent, important messages that require user attention (errors, warnings, important updates)
- Toast: Temporary, non-critical notifications (success confirmations, info messages)
Toggling Visibility
AlertBanner1:
Visible: varShowAlert
Button1:
OnSelect: Set(varShowAlert, true)
AlertDismiss:
OnSelect: Set(varShowAlert, false)
Variants
- Filled: Solid background (most prominent)
- Outline: Border only (subtle)
- Soft: Light background tint (balanced)
Type Presets
- Info: Blue, informational
- Success: Green, success messages
- Warning: Yellow, warnings
- Error: Red, errors
Export Modes
- Safe: Basic banner with title + message + preset.
- Advanced: Includes actions, dismissible behavior, and variants (Pro feature).
Best Practices
- Use for important, persistent messages.
- Avoid stacking multiple alert banners.
- Provide clear actions when needed.
- Use dismissible option for non-critical alerts.
- Match variant to message importance.