Global alerts

Component name: <v-alert-global>

<v-alert-global> components can be placed anywhere in the app and will be rendered in the global alert portal-target at the top of the page. See an example of this global alert rendered at the top of the page in this composition.

Examples

Basic global alert

By adding the theme="warning" property, the alert will be styled as a yellow warning with black text. Otherwise, the alert will be styled as a red alert with white text.

Dismissible global alerts

By adding the dismissible property, alerts can be dismissed. By adding dismissible-id the state is saved in the browser's local storage key dismissedGlobalAlerts and the alert will be permanently dismissed (in that browser).

If you dismiss the first alert below, it will not show up again unless you clear your browser's local storage.

If you need to show an alert in the middle of the page, use a local alert.

API

v-alert-global

Name	Type	Description	Default
global-target	String	The portal to show alerts in	alerts
expanded	Boolean	Whether to start in the expanded state	false
dismissible	Boolean	Whether the error can be dismissed	false
dismissible-id	String	If alert is dismissed while having this id, it will not show up again
theme="warning"	String	This will make the warning yellow with dark text