# Local alerts
Component name: <v-alert-local>
# Dismissible local alert styles
By adding the dismissible property, alerts can be dismissed. By adding dismissible-id an alert can be permanently dismissed and will not show up again unless you delete dismissedAlerts from the browsers local storage or if you add an expiration time :expiration-days="120" (120 days).
# Special icon styles
# Info alert with custom icon
Custom icon may not be working for the moment.
# Button colors in local-alert cta-slot
# API
| Name | Type | Description | Default |
|---|---|---|---|
info | Boolean | Use 'info' styling & icon (fallback) | true |
warning | Boolean | Use 'warning' styling & icon | false |
success | Boolean | Use 'success' styling & icon | false |
error | Boolean | Use 'error' styling & icon | false |
dismissible | Boolean | Whether the alerts should be dismissible (close icon) | false |
dismissible-id | String | Unique identifier for adding state to local storage. Requires dismissible | - |
:expiration-days | Number | Add expiration time before showing again to local storage. Requires dismissible-id | - |
:cta-expiration-days | Number | Expiration time intended for a custom cta button placed in<template v-slot:cta="{ dismiss }">.Also requires dismissible-id | - |
icon | String | Add a custom icon to the alert | - |
mobilepay | Boolean | Use 'mobilepay' custom styling & icon | false |
Boolean's can be written as Boolean attribute's, which means that the presence of the attribute represents the true value, and the absence of the attribute represents the false value. Which means that the following two examples are equivalent: <v-alert-local dismissible> and <v-alert-local :dismissible="true">.
Important
<template v-slot:cta="{ dismiss }"> must be a direct child of <v-alert-local> and must therefore not be wrapped in a <div> or similar.
General notice
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.