# 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 (state is saved in the browser's local storage) an alert can be permanently dismissed.

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