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.
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
You're able to use the
size modifier to control the text and spacing size of your alerts, using one of the available sizes:
The default size is set to
Your alerts accept any kind of content, giving you the flexibility to create good looking contextual messages.
You can add an icon to the
<i-alert> component by providing an
The following example makes use of the bundled Inkline icons, but you can use any icon font that you like:
You can dismiss alerts using a combination of the provided
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.
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.
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.