Alert
Default alert
default alert! Change a few things up and try submitting again.
info alert! Change a few things up and try submitting again.
failure alert! Change a few things up and try submitting again.
warning alert! Change a few things up and try submitting again.
success alert! Change a few things up and try submitting again.
primary alert! Change a few things up and try submitting again.
html
typescript
<div flowbiteAlert>
<div flowbiteAlertContent>
<span>
<span class="font-medium">default alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="info">
<div flowbiteAlertContent>
<span>
<span class="font-medium">info alert!</span> Change a few things up and try submitting again.
</span>
</div>
</div>
<div
flowbiteAlert
color="failure">
<div flowbiteAlertContent>
<span>
<span class="font-medium">failure alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="warning">
<div flowbiteAlertContent>
<span>
<span class="font-medium">warning alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="success">
<div flowbiteAlertContent>
<span>
<span class="font-medium">success alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="primary">
<div flowbiteAlertContent>
<span>
<span class="font-medium">primary alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>Alert with icon
default alert! Change a few things up and try submitting again.
info alert! Change a few things up and try submitting again.
failure alert! Change a few things up and try submitting again.
warning alert! Change a few things up and try submitting again.
success alert! Change a few things up and try submitting again.
primary alert! Change a few things up and try submitting again.
html
typescript
<div flowbiteAlert>
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span class="font-medium">default alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="info">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span class="font-medium">info alert!</span> Change a few things up and try submitting again.
</span>
</div>
</div>
<div
flowbiteAlert
color="failure">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span class="font-medium">failure alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="warning">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span class="font-medium">warning alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="success">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span class="font-medium">success alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
color="failure">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span class="font-medium">primary alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>Bordered alert
default alert! Change a few things up and try submitting again.
info alert! Change a few things up and try submitting again.
failure alert! Change a few things up and try submitting again.
warning alert! Change a few things up and try submitting again.
success alert! Change a few things up and try submitting again.
primary alert! Change a few things up and try submitting again.
html
typescript
<div
flowbiteAlert
border>
<div flowbiteAlertContent>
<span>
<span class="font-medium">default alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
color="info">
<div flowbiteAlertContent>
<span>
<span class="font-medium">info alert!</span> Change a few things up and try submitting again.
</span>
</div>
</div>
<div
flowbiteAlert
border
color="failure">
<div flowbiteAlertContent>
<span>
<span class="font-medium">failure alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
color="warning">
<div flowbiteAlertContent>
<span>
<span class="font-medium">warning alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
color="success">
<div flowbiteAlertContent>
<span>
<span class="font-medium">success alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
color="primary">
<div flowbiteAlertContent>
<span>
<span class="font-medium">primary alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>Dismissable alert
default alert! Change a few things up and try submitting again.
info alert! Change a few things up and try submitting again.
failure alert! Change a few things up and try submitting again.
warning alert! Change a few things up and try submitting again.
success alert! Change a few things up and try submitting again.
primary alert! Change a few things up and try submitting again.
html
typescript
<div flowbiteAlert>
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span>
<span class="font-medium">default alert!</span> Change a few things up and try submitting
again.
</span>
</span>
<button
flowbiteAlertButton
(click)="onDismiss()">
<flowbite-icon
name="close"
class="size-5 stroke-2" />
</button>
</div>
</div>
<div
flowbiteAlert
color="info">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span>
<span class="font-medium">info alert!</span> Change a few things up and try submitting
again.
</span>
</span>
<button
flowbiteAlertButton
(click)="onDismiss()">
<flowbite-icon
name="close"
class="size-5 stroke-2" />
</button>
</div>
</div>
<div
flowbiteAlert
color="failure">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span>
<span class="font-medium">failure alert!</span> Change a few things up and try submitting
again.
</span>
</span>
<button
flowbiteAlertButton
(click)="onDismiss()">
<flowbite-icon
name="close"
class="size-5 stroke-2" />
</button>
</div>
</div>
<div
flowbiteAlert
color="warning">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span>
<span class="font-medium">warning alert!</span> Change a few things up and try submitting
again.
</span>
</span>
<button
flowbiteAlertButton
(click)="onDismiss()">
<flowbite-icon
name="close"
class="size-5 stroke-2" />
</button>
</div>
</div>
<div
flowbiteAlert
color="success">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span>
<span class="font-medium">success alert!</span> Change a few things up and try submitting
again.
</span>
</span>
<button
flowbiteAlertButton
(click)="onDismiss()">
<flowbite-icon
name="close"
class="size-5 stroke-2" />
</button>
</div>
</div>
<div
flowbiteAlert
color="primary">
<div flowbiteAlertContent>
<span class="inline-flex items-center gap-2">
<flowbite-icon
name="infoCircle"
class="size-5 stroke-2" />
<span>
<span class="font-medium">primary alert!</span> Change a few things up and try submitting
again.
</span>
</span>
<button
flowbiteAlertButton
(click)="onDismiss()">
<flowbite-icon
name="close"
class="size-5 stroke-2" />
</button>
</div>
</div>Border accent
default alert! Change a few things up and try submitting again.
info alert! Change a few things up and try submitting again.
failure alert! Change a few things up and try submitting again.
warning alert! Change a few things up and try submitting again.
success alert! Change a few things up and try submitting again.
primary alert! Change a few things up and try submitting again.
html
typescript
<div
flowbiteAlert
border
accent>
<div flowbiteAlertContent>
<span>
<span class="font-medium">default alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
accent
color="info">
<div flowbiteAlertContent>
<span>
<span class="font-medium">info alert!</span> Change a few things up and try submitting again.
</span>
</div>
</div>
<div
flowbiteAlert
border
accent
color="failure">
<div flowbiteAlertContent>
<span>
<span class="font-medium">failure alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
accent
color="warning">
<div flowbiteAlertContent>
<span>
<span class="font-medium">warning alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
accent
color="success">
<div flowbiteAlertContent>
<span>
<span class="font-medium">success alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>
<div
flowbiteAlert
border
accent
color="primary">
<div flowbiteAlertContent>
<span>
<span class="font-medium">primary alert!</span> Change a few things up and try submitting
again.
</span>
</div>
</div>