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


Alerts are available for any length of text, and can have an optional dismiss button.

Alert Examples


By default, alerts are set to have width: 100%, fully spanning the width of the parent container. For choosing the context of the alert, use the variant property.

Alert 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.

The default size is set to md.

Alert Sizes


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

Alert Elements


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


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.

Dismissible Alert

Component API

Here you can find a list of the various customization options you can use for the alert component as props, as well as available slots.

Alert API

Sass Variables

Here you can find a list of the Sass variables you can use for the alert component. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.