# Vue Alert Component - Flowbite #### Show contextual information to your users using alert elements based on Tailwind CSS --- :::tip Original reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/) ::: 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. Flowbite also includes dismissable alerts which can be hidden by the users by clicking on the close icon. ## Prop - type ```typescript export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark' defineProps({ type: { type: String as PropType, default: 'info', }, }) ``` ```vue ``` ## Prop - title ```typescript defineProps({ title: { type: String, default: '', }, }) ``` ```vue ``` ## Prop - closable ```typescript defineProps({ closable: { type: Boolean, default: false, }, }) ``` ```vue ``` ## Prop - border ```typescript defineProps({ border: { type: Boolean, default: false, }, }) ``` ```vue ``` ## Prop - icon ```typescript defineProps({ icon: { type: Boolean, default: true, }, }) ``` ```vue ``` ## Prop - inline ```typescript defineProps({ inline: { type: Boolean, default: true, }, }) ``` ```vue ```