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. For choosing the context of the alert,
By default, alerts are set to have
width: 100%, fully spanning the width of the parent container.
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.
Some quick example text to build on the alert and make up the bulk of the alert's content.
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.
|dismissLabel||Sets the dismiss lable, replaceable using the || |
|dismissible||Sets the alert as dismissible.|| || |
|show||Sets the dismiss || || |
|size||Sets the size of the alert component.|| || |
|variant||Sets the color variant of the alert component.|| || |