Alert

Provide contextual feedback messages for typical user actions using the alert component.

Color Variants

Alerts are contextual feedback messages usable for any length of text, and can have an optional dismiss button. For choosing the context of the alert, use the color property.

Size Variants

You're able to use the size modifier to control the text and spacing size of your alerts, using one of the available sizes: sm, md, and lg.

Icon

It's very common for alerts to have an associated icon to help the user understand the significance of the alert.

Content

Your alerts accept any kind of content, giving you the flexibility to create great looking contextual messages.

You can also add an icon to the <IAlert> component by providing an icon slot. The following example makes use of the bundled Inkline icons, but you can use any icon font that you like:

Dismissible

You can dismiss alerts using a combination of the provided dismissible property and v-model directive. The dismissible property will be used to show the dismiss icon. The v-model directive will show or hide the alert, resetting dismissed alerts when needed.

Props

Slots

Events

Design Tokens