# Vue Alert - Flowbite #### Show contextual information to your users using alert elements based on Tailwind CSS The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page. ## Default alert Use the following examples of alert components to show messages as feedback to your users. ```vue ``` ## Alerts with icon You can also include a descriptive icon to complement the message inside the alert component with the following example. ```vue ``` ## Bordered alerts Use this example to add a border accent to the alert component instead of just a plain background. ```vue ``` ## Border accent Use this example to add a border accent on top of the alert component for further visual distinction. ```vue ``` ## Alerts with list Use this example to show a list and a description inside an alert component. ```vue ``` ## Dismissing Use the following alert elements that are also dismissable. ```vue ``` ## Additional content The following alert components can be used if you wish to disclose more information inside the element. ```vue ``` ## API ### Props | Name | Values | Default | |----------|-----------------------------------------------|---------| | type | `info`, `danger`, `success`,`warning`, `dark` | `info` | | closable | `boolean` | `false` | | icon | `boolean` | `false` | | border | `boolean` | `false` | ### Events | Name | Description | |-------|----------------------| | close | Close button pressed | ### Slots | Name | Description | |------------|-------------------| | default | alert content | | close-icon | custom close icon | | icon | custom icon | | title | title content |