# Alerts

Component name: <v-alerts> + <v-alert>

Alerts are present on subpages and are used for contextual information that relates to the currently navigated topic.

Each alert is wrapped in a v-alerts group to highlight the alert type.

Multiple alerts can be shown in the same alerts group.

# Examples

# Info alerts

# Error alerts

# Global alerts

# Dismissible alerts

By adding the dismissible property, alerts can be permanently dismissed (state is saved in the browser's local storage). Dismissible alerts must be given a dismissible-id which uniquely identifies the alert.

# Info alert with custom icon

# Components

# v-alerts

Wrapper component for alerts.


Name Type Description Default
info Boolean Use 'info' styling true
error Boolean Use 'error' styling false
global [Boolean] Show global alerts false
global-target [String] The portal to show alerts in alerts
interval [Number] Seconds between alert rotations 6
expanded Boolean Whether to start in the expanded state false
dismissible Boolean Whether the alerts should be dismissible false
dismissible-id String Unique identifier for the group of alerts. Used together with dismissible -
custom-icon-src String Add a custom icon to the alert -

# v-alert


Name Type Description Default
active Boolean Whether or not the alert is active false


All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the class attribute.