Alert
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. Flowbite also includes dismissable alerts which can be hidden by the users by clicking on the close icon.
Set up
Import Alert and set variables in the script tag.
<script>
import { Alert } from "flowbite-svelte";
</script>Default alert
Use the following examples of alert components to show messages as feedback to your users.
<Alert id="alert-blue">
<span slot="content">
<span class="font-medium">
Info alert!
</span>
Change a few things up and try submitting again.
</span>
</Alert>Alerts with icon
You can also include a descriptive icon to complement the message inside the alert component with the following example.
<Alert id="alert-red" color="red" icon={XCircle}>
<span slot="content">
<span class="font-medium">
Info alert!
</span>
Change a few things up and try submitting again.
</span>
</Alert>Dismissable alerts
Use the following alert elements that are also dismissable.
<Alert id="alert-green" color="green" closeBtn>
<span slot="content">
<span class="font-medium">
Info alert!
</span>
Change a few things up and try submitting again.
</span>
</Alert>Border accent
Use the following alert components with a border accent as an alternative style.
<Alert id="alert-yellow" color="yellow" borderAccent={true}>
<span slot="content">
<span class="font-medium">
Info alert!
</span>
Change a few things up and try submitting again.
</span>
</Alert>Rounded
Use rounded props to control roundedness.
<Alert id="alert-yellow" color="yellow" rounded={false}>
<span slot="content">
<span class="font-medium">
Info alert!
</span>
Change a few things up and try submitting again.
</span>
</Alert>Additional content
The following alert components can be used if you wish to disclose more information inside the element.
<Alert id="alert-extra" color="blue" icon={InformationCircle} closeBtn>
<span slot="content">
<span class="font-medium">
Info alert!
</span>
Change a few things up and try submitting again.
</span>
<div slot="extra">
<div class="mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800">
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.
</div>
<div class="flex">
<button type="button" class="mr-2 inline-flex items-center rounded-lg bg-blue-700 px-3 py-1.5 text-center text-xs font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-800 dark:hover:bg-blue-900">
<Eye class="-ml-0.5 mr-2 h-4 w-4" />View more
</button>
<button
type="button"
class="rounded-lg border border-blue-700 bg-transparent px-3 py-1.5 text-center text-xs font-medium text-blue-700 hover:bg-blue-800 hover:text-white focus:ring-4 focus:ring-blue-300 dark:border-blue-800 dark:text-blue-800 dark:hover:text-white"
>
Dismiss
</button>
</div>
</div>
</Alert>Props
The component has the following props, type, and default values. See types page for type information.
| Name | Type | Default |
|---|---|---|
| color | Colors | 'blue' |
| icon | typeof SvelteComponent | null | null |
| closeBtn | boolean | false |
| rounded | boolean | true |
| borderAccent | boolean | false |