Alert¶
The Alert widget is a message box with a title, an icon and a short description. Use it to tell visitors something they should notice: a warning that the data is a day old, a note that a report is still being generated, or a hint on how to use a filter. Visitors can close it unless you turn that off.
See also Badge for a small status label and Text for plain text.
Using it¶
Drop an Alert onto the page, fill in Title and Description, and pick a Variant if your theme offers looks such as warning or success. To show the alert only in some situations, give it a Visible Expression, for example {$data.summary.overdue} > 0 to show a warning only when there are overdue invoices.
Options¶
| Option | Values | Default | Description |
|---|---|---|---|
| Title | Any text or template | Title |
The alert heading |
| Icon | An icon key | Info circle | The icon at the start of the alert. The brush button beside it sets the icon's style |
| Description | Any text or template | Alert description |
The message under the title |
| Show close button | On · Off | On | Whether the visitor can dismiss the alert |
| Icon (close button) | An icon key | An X | The close button's icon. Only offered while Show close button is on |
| Variant | Theme variants | Default | Picks the alert's look from the theme. See Variants |
| Custom Style | CSS per part | Empty | Extra styling for the Alert, Container and Dismiss Button. Dismiss Button is only offered while the close button is shown |
| Box Style | Sizing and spacing | — | The box around the alert |
Tips¶
A few things to keep in mind:
- The title and the description are slots, so either can hold other widgets instead of plain text. You can put a button inside an alert, for example.
- For a short status marker inline with other content, use Badge.