Alert
Show contextual information to users using the alert element.
The alert element is commonly used to deliver information to users. Not only as success or error messages, but also as highlighted information that complements the flow of paragraphs and headers on a page.
A user can dismiss the alert by clicking on the close icon.
Overviews #
These are some overviews of the alert. Use the options to switch between various styles, sizes, and variants.
Alert
Basic Usage #
Use the alert class on a standard div element. You can add role="alert" attribute as well. Example:
Color Schemes #
To change the color schemes of the alert, use Skewind's scheme-{color} utility classes. You can also switch to a softer scheme by appending the alert--soft class to the alert element.
Default Scheme
Softer Scheme
Alert Variants #
The alert variant is alert--default by default just like the above examples. We provide a few more variants that are listed below. Append alert--{style} class to set the alert variant.
Outline
alert--outline
Softer Outline
alert--outline alert--soft
Accent
alert--accent
Softer Accent
alert--accent alert--soft
Dismissing #
Use one of these two methods to make the alert dismissible.
Via Data Attributes #
The easiest way to be able to make the alert dismissible is by using data attributes.
Create a trigger with any element with the data-dismiss-trigger attribute. Insert it anywhere inside of the alert element that has a data-dismissible attribute. The alert will be dismissed when the click event is triggered.
We recommend you use a button tag as a trigger.
Via Javascript #
Initialize alert elements by calling the Dismissible.createInstance(element, options) function.
That makes an alert listen for click events on descendant elements that have the data-dismiss-trigger attribute. (Not necessary when using the data-api’s auto-initialization).
| Function | Description |
|---|---|
Dismissible.createInstance(element, options) |
Create a Dismissible instance. |
Dismissible.getInstance(element, options) |
If any, get the Dismissible instance. |
Dismissible.getOrCreateInstance(element, options) |
Get the Dismissible instance if there is one. Create it if necessary. |
Dismissible.destroyInstance(element) |
To destroy a Dismissible instance. Usually called before removing the element. |
Dismissible.dataApi(wrapperElement) |
Execute the Data API within the specified wrapperElement. |
API #
Parameters #
Most Skewind component constructor accept two parameters, as well as the Dismissible component.
| Parameter | Type | Required | Description |
|---|---|---|---|
element |
HTMLElement | Required | The target element. You can use any HTMLElement. This element is also used as a key to locate the instance. |
options |
Object | Required | Pass the options object that contains the data below. |
Options #
Currently, there is only one option.
| Option | Type | Required | Description |
|---|---|---|---|
triggerSelector |
String | Optional. Default: [data-dismiss-trigger] |
Query selector of the trigger elements. |
Methods #
Each instance has these public methods.
| Methods | Return | Description |
|---|---|---|
dismiss() |
void | Remove the target element. |
dispose() |
void | Alternative to Dimissable.destroyInstance function. Just in case you want to cancel the dismissible effect. |
Events #
This event may be emitted for hooking into alert functionality.
| Event | Description |
|---|---|
dismissible.dismiss |
Emitted immediately when the alert is about to be dismissed. |