Default Badge
Info alert! Change a few things up and try submitting again.
<flowbite-alert>
<span class="font-medium">Info alert!</span> Change a few things up
and try submitting again.
</flowbite-alert>Alerts with icon
Info alert! Change a few things up and try submitting again.
<flowbite-alert [icon]="icon" color="red">
<span class="font-medium">Info alert!</span> Change a few things up
and try submitting again.
</flowbite-alert>
<ng-template #icon><svg>...</svg></ng-template>Dismissible alerts
Info alert! Change a few things up and try submitting again.
onDismiss = () => alert('Alert dismissed!');<flowbite-alert color="green" [dismiss]="onDismiss">
<span class="font-medium">Info alert!</span> Change a few things up
and try submitting again.
</flowbite-alert>Border accent
Info alert! Change a few things up and try submitting again.
<flowbite-alert
color="yellow"
[withBorderAccent]="true"
[rounded]="false"
>
<span class="font-medium">Info alert!</span> Change a few things up
and try submitting again.
</flowbite-alert>Additional content
This is an info alert
More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
<flowbite-alert [icon]="icon" [additionalContent]="additionalContent">
<h3 class="text-lg font-medium text-blue-700 dark:text-blue-800">
This is an info alert
</h3>
</flowbite-alert>
<ng-template #icon><svg>...</svg></ng-template>
<ng-template #additionalContent><svg>...</svg></ng-template>