Alert

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

Variants

Alerts are available for any length of text, and can have an optional dismiss button. For choosing the context of the alert, use the variant property.

By default, alerts are set to have width: 100%, fully spanning the width of the parent container.

Alert Variants

A simple primary alert with an example link. It's clickable!

A simple secondary alert with an example link. It's clickable!

A simple success alert with an example link. It's clickable!

A simple danger alert with an example link. It's clickable!

A simple warning alert with an example link. It's clickable!

A simple info alert with an example link. It's clickable!

Sizes

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.

The default size is set to md.

Alert Sizes
Some quick example text to build on the alert title and make up the bulk of the alert's content.
Some quick example text to build on the alert title and make up the bulk of the alert's content.
Some quick example text to build on the alert title and make up the bulk of the alert's content.

Elements

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

Alert Elements

Alert Title

Some quick example text to build on the alert and make up the bulk of the alert's content.

Icon

You can add an icon to the <i-alert> 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:

Alert Icon

Some quick example text to build on the alert title and make up the bulk of the alert's content.

Some quick example text to build on the alert title and make up the bulk of the alert's content.

Some quick example text to build on the alert title and make up the bulk of the alert's content.

Dismissible

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

Alert Icon

Whoa! Nicely done.

×

API

Alert API <i-alert>
Property Description Type Accepted Default
dismissLabel Sets the dismiss lable, replaceable using the dismiss slot. String ×
dismissible Sets the alert as dismissible. Boolean true, false false
show Sets the dismiss v-model for the alert component. Alert is only visible if show is true. Boolean true, false true
size Sets the size of the alert component. String sm, md, lg md
variant Sets the color variant of the alert component. String primary, secondary, success, danger, warning, info primary