## Alert Displays important alert messages. ### Basic usage Alert components are non-overlay elements in the page that does not disappear automatically. ::: demo Alert provides 4 types of themes defined by `type`, whose default value is `info`. ```html ``` ::: ### Customizable close button Customize the close button as texts or other symbols. ::: demo Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. `closable` attribute decides if the component can be closed or not. It accepts `boolean`, and the default is `true`. You can set `close-text` attribute to replace the default cross symbol as the close button. Be careful that `close-text` must be a string. `close` event fires when the component is closed. ```html ``` ::: ### With icon Displaying an icon improves readability. ::: demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type. ```html ``` ::: ### With description Description includes a message with more detailed information. ::: demo Besides the required `title` attribute, you can add a `description` attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically. ```html ``` ::: ### With icon and description ::: demo At last, this is an example with both icon and description. ```html ``` ::: ### Attributes | Attribute | Description | Type | Accepted Values | Default | |---------- |-------------- |---------- |-------------------------------- |-------- | | **title** | title **REQUIRED** | string | — | — | | type | component type | string | success/warning/info/error | info | | description | supportive text | string | — | — | | closable | if closable or not | boolean | — | true | | close-text | customized close button text | string | — | — | | show-icon | if a type icon is displayed | boolean | — | false | ### Events | Event Name | Description | Parameters | |---------- |-------- |---------- | | close | fires when alert is closed | — |