Flowbite Vue 3Vue 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/
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<AlertType>,
default: 'info',
},
})
Info
Warning
Danger
Dark
Success
vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" class="mb-2">Info</Alert>
<Alert type="warning" class="mb-2">Warning</Alert>
<Alert type="danger" class="mb-2">Danger</Alert>
<Alert type="dark" class="mb-2">Dark</Alert>
<Alert type="success">Success</Alert>
</div>
</template>
Prop - title
typescript
defineProps({
title: {
type: String,
default: '',
},
})
Some info title
Info
Some warning title
Warning
Some danger title
Danger
Some dark title
Dark
Some success title
Success
vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" title="Some info title" class="mb-2">Info</Alert>
<Alert type="warning" title="Some warning title" class="mb-2">Warning</Alert>
<Alert type="danger" title="Some danger title" class="mb-2">Danger</Alert>
<Alert type="dark" title="Some dark title" class="mb-2">Dark</Alert>
<Alert type="success" title="Some success title">Success</Alert>
</div>
</template>
Prop - closable
typescript
defineProps({
closable: {
type: Boolean,
default: false,
},
})
Info
Warning
Danger
Dark
Success
vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" closable class="mb-2">Info</Alert>
<Alert type="warning" closable class="mb-2">Warning</Alert>
<Alert type="danger" closable class="mb-2">Danger</Alert>
<Alert type="dark" closable class="mb-2">Dark</Alert>
<Alert type="success" closable>Success</Alert>
</div>
</template>
Prop - border
typescript
defineProps({
border: {
type: Boolean,
default: false,
},
})
Info
Warning
Danger
Dark
Success
vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" border class="mb-2">Info</Alert>
<Alert type="warning" border class="mb-2">Warning</Alert>
<Alert type="danger" border class="mb-2">Danger</Alert>
<Alert type="dark" border class="mb-2">Dark</Alert>
<Alert type="success" border>Success</Alert>
</div>
</template>
Prop - icon
typescript
defineProps({
icon: {
type: Boolean,
default: true,
},
})
Info
WARNING
Warning
Danger
Dark
Success
vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" :icon="false" class="mb-2">Info</Alert>
<Alert title="WARNING" type="warning" :icon="false" class="mb-2">Warning</Alert>
<Alert type="danger" :icon="false" class="mb-2">Danger</Alert>
<Alert type="dark" :icon="false" class="mb-2">Dark</Alert>
<Alert type="success" :icon="false">Success</Alert>
</div>
</template>
Prop - inline
typescript
defineProps({
inline: {
type: Boolean,
default: true,
},
})
Info title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda beatae eaque error est eveniet, facere illo labore libero minima molestiae neque nisi non officia quod sed temporibus unde vitae voluptates.
Warning title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur cupiditate dicta dolore dolores hic sequi tenetur, vero! Blanditiis consequatur culpa nisi ratione repellat! Delectus dolore magni nemo placeat qui sequi.
Danger title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus accusantium atque cupiditate, dignissimos dolorum, error inventore iste libero minus nihil possimus quasi quia quibusdam quisquam recusandae repellat reprehenderit temporibus.
Dark title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam dolore et, fuga impedit, iusto nam numquam officiis quas, repellat sapiente sit unde vel? Adipisci delectus dolore eius optio sunt.
Success title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias at culpa cupiditate deleniti eos ipsam ipsum, nostrum perspiciatis provident tempore? Aspernatur expedita praesentium voluptatibus. Accusamus explicabo iusto nobis reiciendis temporibus!
vue
<script setup>
import { Alert } from 'flowbite-vue'
</script>
<template>
<div class="flex flex-col">
<Alert type="info" title="Info title" :inline="false" class="mb-2">
Lorem...
</Alert>
<Alert type="warning" title="Warning title" :inline="false" class="mb-2">
Lorem...
</Alert>
<Alert type="danger" title="Danger title" :inline="false" class="mb-2">
Lorem...
</Alert>
<Alert closable type="dark" title="Dark title" :inline="false" class="mb-2">
Lorem...
</Alert>
<Alert type="success" title="Success title" :inline="false">
Lorem...
<template #actions>
<Button size="sm" color="green" class="mr-2">
Buttons everywhere
</Button>
<Button size="sm" outline color="green">
<template #prefix>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
</template>
And here
</Button>
</template>
</Alert>
</div>
</template>