Svelte Alert - Flowbite

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.

Svelte
<script>
  import { Alert } from 'flowbite-svelte';
</script>

Default alert #

Use the following examples of alert components to show messages as feedback to your users.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-4"><div role="alert" class="bg-primary-50 dark:bg-gray-800 text-primary-800 dark:text-primary-400 rounded-lg border-primary-500 dark:border-primary-200 divide-primary-500 dark:divide-primary-200 p-4 gap-3 text-sm"> <span class="font-medium" data-svelte-h="svelte-srjwy4">Default alert!</span>
Change a few things up and try submitting again. </div>    <div role="alert" class="bg-blue-50 dark:bg-gray-800 text-blue-800 dark:text-blue-400 rounded-lg border-blue-300 dark:border-blue-800 divide-blue-300 dark:divide-blue-800 p-4 gap-3 text-sm"> <span class="font-medium" data-svelte-h="svelte-1ffo80p">Info alert!</span>
Change a few things up and try submitting again. </div>    <div role="alert" class="bg-red-50 dark:bg-gray-800 text-red-800 dark:text-red-400 rounded-lg border-red-300 dark:border-red-800 divide-red-300 dark:divide-red-800 p-4 gap-3 text-sm"> <span class="font-medium" data-svelte-h="svelte-pk1fty">Danger alert!</span>
Change a few things up and try submitting again. </div>    <div role="alert" class="bg-green-50 dark:bg-gray-800 text-green-800 dark:text-green-400 rounded-lg border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800 p-4 gap-3 text-sm"> <span class="font-medium" data-svelte-h="svelte-5yq51q">Success alert!</span>
Change a few things up and try submitting again. </div>    <div role="alert" class="bg-yellow-50 dark:bg-gray-800 text-yellow-800 dark:text-yellow-300 rounded-lg border-yellow-300 dark:border-yellow-800 divide-yellow-300 dark:divide-yellow-800 p-4 gap-3 text-sm"> <span class="font-medium" data-svelte-h="svelte-bshnzn">Warning alert!</span>
Change a few things up and try submitting again. </div>    <div role="alert" class="bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg border-gray-500 divide-gray-500 p-4 gap-3 text-sm"> <span class="font-medium" data-svelte-h="svelte-1iirds9">Dark alert!</span>
Change a few things up and try submitting again. </div>   </div>
Svelte
<script>
  import { Alert } from 'flowbite-svelte';
</script>

<Alert>
  <span class="font-medium">Default alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert color="blue">
  <span class="font-medium">Info alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert color="red">
  <span class="font-medium">Danger alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert color="green">
  <span class="font-medium">Success alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert color="yellow">
  <span class="font-medium">Warning alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert color="dark">
  <span class="font-medium">Dark alert!</span>
  Change a few things up and try submitting again.
</Alert>

Alerts with icon #

You can also include a descriptive icon to complement the message inside the alert component with the following example.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-4"><div role="alert" class="bg-primary-50 dark:bg-gray-800 text-primary-800 dark:text-primary-400 rounded-lg border-primary-500 dark:border-primary-200 divide-primary-500 dark:divide-primary-200 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-srjwy4">Default alert!</span>
Change a few things up and try submitting again.</div> </div>    <div role="alert" class="bg-blue-50 dark:bg-gray-800 text-blue-800 dark:text-blue-400 rounded-lg border-blue-300 dark:border-blue-800 divide-blue-300 dark:divide-blue-800 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-1ffo80p">Info alert!</span>
Change a few things up and try submitting again.</div> </div>    <div role="alert" class="bg-red-50 dark:bg-gray-800 text-red-800 dark:text-red-400 rounded-lg border-red-300 dark:border-red-800 divide-red-300 dark:divide-red-800 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-pk1fty">Danger alert!</span>
Change a few things up and try submitting again.</div> </div>    <div role="alert" class="bg-green-50 dark:bg-gray-800 text-green-800 dark:text-green-400 rounded-lg border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-5yq51q">Success alert!</span>
Change a few things up and try submitting again.</div> </div>    <div role="alert" class="bg-yellow-50 dark:bg-gray-800 text-yellow-800 dark:text-yellow-300 rounded-lg border-yellow-300 dark:border-yellow-800 divide-yellow-300 dark:divide-yellow-800 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-bshnzn">Warning alert!</span>
Change a few things up and try submitting again.</div> </div>    <div role="alert" class="bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg border-gray-500 divide-gray-500 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-1iirds9">Dark alert!</span>
Change a few things up and try submitting again.</div> </div>   </div>
Svelte
<script>
  import { Alert } from 'flowbite-svelte';
  import { InfoCircleSolid } from 'flowbite-svelte-icons';
</script>

<Alert>
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Default alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert color="blue">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Info alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert color="red">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Danger alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert color="green">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Success alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert color="yellow">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Warning alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert color="dark">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Dark alert!</span>
  Change a few things up and try submitting again.
</Alert>

Bordered alerts #

Use this example to add a border accent to the alert component instead of just a plain background.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-4"><div role="alert" class="bg-primary-50 dark:bg-gray-800 text-primary-800 dark:text-primary-400 rounded-lg border border-primary-500 dark:border-primary-200 divide-primary-500 dark:divide-primary-200 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-srjwy4">Default alert!</span>
Change a few things up and try submitting again.</div> </div>    <div role="alert" class="bg-blue-50 dark:bg-gray-800 text-blue-800 dark:text-blue-400 rounded-lg border border-blue-300 dark:border-blue-800 divide-blue-300 dark:divide-blue-800 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-1ffo80p">Info alert!</span>
Change a few things up and try submitting again.</div> </div>    <div role="alert" class="bg-red-50 dark:bg-gray-800 text-red-800 dark:text-red-400 rounded-lg border border-red-300 dark:border-red-800 divide-red-300 dark:divide-red-800 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-pk1fty">Danger alert!</span>
Change a few things up and try submitting again.</div> </div>    <div role="alert" class="bg-green-50 dark:bg-gray-800 text-green-800 dark:text-green-400 rounded-lg border border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-5yq51q">Success alert!</span>
Change a few things up and try submitting again.</div> </div>    <div role="alert" class="bg-yellow-50 dark:bg-gray-800 text-yellow-800 dark:text-yellow-300 rounded-lg border border-yellow-300 dark:border-yellow-800 divide-yellow-300 dark:divide-yellow-800 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-bshnzn">Warning alert!</span>
Change a few things up and try submitting again.</div> </div>    <div role="alert" class="bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg border border-gray-500 divide-gray-500 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-1iirds9">Dark alert!</span>
Change a few things up and try submitting again.</div> </div>   </div>
Svelte
<script>
  import { Alert } from 'flowbite-svelte';
  import { InfoCircleSolid } from 'flowbite-svelte-icons';
</script>

<Alert border>
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Default alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert border color="blue">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Info alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert border color="red">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Danger alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert border color="green">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Success alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert border color="yellow">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Warning alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert border color="dark">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Dark alert!</span>
  Change a few things up and try submitting again.
</Alert>

Alerts with list #

Use this example to show a list and a description inside an alert component.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-4"><div role="alert" class="bg-primary-50 dark:bg-gray-800 text-primary-800 dark:text-primary-400 rounded-lg border-primary-500 dark:border-primary-200 divide-primary-500 dark:divide-primary-200 p-4 gap-3 text-sm flex items-center !items-start"><span slot="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <span class="sr-only" data-svelte-h="svelte-qvicv7">Info</span></span> <div><p class="font-medium" data-svelte-h="svelte-1yfbg3q">Ensure that these requirements are met:</p> <ul class="mt-1.5 ms-4 list-disc list-inside" data-svelte-h="svelte-1y4i7mm"><li>At least 10 characters (and up to 100 characters)</li> <li>At least one lowercase character</li> <li>Inclusion of at least one special character, e.g., ! @ # ?</li></ul></div> </div>    <div role="alert" class="bg-blue-50 dark:bg-gray-800 text-blue-800 dark:text-blue-400 rounded-lg border-blue-300 dark:border-blue-800 divide-blue-300 dark:divide-blue-800 p-4 gap-3 text-sm flex items-center !items-start"><span slot="icon"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <span class="sr-only" data-svelte-h="svelte-qvicv7">Info</span></span> <div><p class="font-medium" data-svelte-h="svelte-1yfbg3q">Ensure that these requirements are met:</p> <ul class="list-disc list-inside mt-1.5 ms-4"><li class="">At least 10 characters (and up to 100 characters)</li>  <li class="">At least one lowercase character</li>  <li class="">Inclusion of at least one special character, e.g., ! @ # ?</li> </ul> </div> </div>   </div>
Svelte
<script>
  import { Alert, Li, List } from 'flowbite-svelte';
  import { InfoCircleSolid } from 'flowbite-svelte-icons';
</script>

<Alert class="!items-start">
  <span slot="icon">
    <InfoCircleSolid slot="icon" class="w-4 h-4" />
    <span class="sr-only">Info</span>
  </span>
  <p class="font-medium">Ensure that these requirements are met:</p>
  <ul class="mt-1.5 ms-4 list-disc list-inside">
    <li>At least 10 characters (and up to 100 characters)</li>
    <li>At least one lowercase character</li>
    <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
  </ul>
</Alert>
<Alert color="blue" class="!items-start">
  <span slot="icon">
    <InfoCircleSolid slot="icon" class="w-4 h-4" />
    <span class="sr-only">Info</span>
  </span>
  <p class="font-medium">Ensure that these requirements are met:</p>
  <List class="mt-1.5 ms-4">
    <Li>At least 10 characters (and up to 100 characters)</Li>
    <Li>At least one lowercase character</Li>
    <Li>Inclusion of at least one special character, e.g., ! @ # ?</Li>
  </List>
</Alert>

Dismissable alerts #

Use the following alert elements that are also dismissable.

As Alert inhertits from the Frame component you can attach the transition and params prop to control the dissimal animation. By default fade svelte function is used. See the example below.

You can use slot="close" to override the default close button. That slot exposes close function that makes the alert dismissed when triggered. See the last example.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-4"><div><div role="alert" class="bg-primary-50 dark:bg-gray-800 text-primary-800 dark:text-primary-400 rounded-lg border-primary-500 dark:border-primary-200 divide-primary-500 dark:divide-primary-200 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div>A simple default alert with an
<a href="/" class="font-semibold underline hover:text-blue-800 dark:hover:text-blue-900" data-svelte-h="svelte-1hatxq0">example link</a>
. Give it a click if you like.</div>  <button type="button" class="focus:outline-none whitespace-normal m-0.5 rounded-lg focus:ring-2 p-1.5 focus:ring-gray-400 hover:bg-gray-100 ms-auto -me-1.5 -my-1.5 dark:hover:bg-gray-700" aria-label="Close"><span class="sr-only">Close</span> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>   </div> </div>   <div><div role="alert" class="bg-blue-50 dark:bg-gray-800 text-blue-800 dark:text-blue-400 rounded-lg border-blue-300 dark:border-blue-800 divide-blue-300 dark:divide-blue-800 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div>A simple info alert with an
<a href="/" class="font-semibold underline hover:text-blue-800 dark:hover:text-blue-900" data-svelte-h="svelte-1hatxq0">example link</a>
. Give it a click if you like.</div>  <button type="button" class="focus:outline-none whitespace-normal m-0.5 rounded-lg focus:ring-2 p-1.5 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:text-blue-300 ms-auto -me-1.5 -my-1.5 dark:hover:bg-gray-700" aria-label="Close"><span class="sr-only">Close</span> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>   </div> </div>   <div><div role="alert" class="bg-red-50 dark:bg-gray-800 text-red-800 dark:text-red-400 rounded-lg border-red-300 dark:border-red-800 divide-red-300 dark:divide-red-800 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div>A simple info alert with an
<a href="/" class="font-semibold underline hover:text-red-800 dark:hover:text-red-900" data-svelte-h="svelte-1h5h3fy">example link</a>
. Give it a click if you like.</div>  <button type="button" class="focus:outline-none whitespace-normal m-0.5 rounded-lg focus:ring-2 p-1.5 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:text-red-300 ms-auto -me-1.5 -my-1.5 dark:hover:bg-gray-700" aria-label="Close"><span class="sr-only">Close</span> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>   </div> </div>   <div><div role="alert" class="bg-green-50 dark:bg-gray-800 text-green-800 dark:text-green-400 rounded-lg border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div>A simple info alert with an
<a href="/" class="font-semibold underline hover:text-green-800 dark:hover:text-green-900" data-svelte-h="svelte-10owgmu">example link</a>
. Give it a click if you like.</div>  <button type="button" class="focus:outline-none whitespace-normal m-0.5 rounded-lg focus:ring-2 p-1.5 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:text-green-300 ms-auto -me-1.5 -my-1.5 dark:hover:bg-gray-700" aria-label="Close"><span class="sr-only">Close</span> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>   </div> </div>   <div><div role="alert" class="bg-yellow-50 dark:bg-gray-800 text-yellow-800 dark:text-yellow-300 rounded-lg border-yellow-300 dark:border-yellow-800 divide-yellow-300 dark:divide-yellow-800 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div>An alert with non default animation - fly away.</div>  <button type="button" class="focus:outline-none whitespace-normal m-0.5 rounded-lg focus:ring-2 p-1.5 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:text-yellow-300 ms-auto -me-1.5 -my-1.5 dark:hover:bg-gray-700" aria-label="Close"><span class="sr-only">Close</span> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>   </div> </div>   <div><div role="alert" class="bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-lg border-gray-500 divide-gray-500 p-4 gap-3 text-sm flex items-center"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div>An alert with the custom dismissal button.</div> <button type="button" slot="close-button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center px-3 py-2 text-xs text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus-within:ring-primary-300 dark:focus-within:ring-primary-800 rounded-lg ms-auto">Dissmiss</button> </div> </div>  </div>
Svelte
<script>
  import { Alert, Button } from 'flowbite-svelte';
  import { InfoCircleSolid } from 'flowbite-svelte-icons';
  import { fly } from 'svelte/transition';
</script>

<Alert dismissable>
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  A simple default alert with an
  <a href="/" class="font-semibold underline hover:text-blue-800 dark:hover:text-blue-900">example link</a>
  . Give it a click if you like.
</Alert>
<Alert color="blue" dismissable>
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  A simple info alert with an
  <a href="/" class="font-semibold underline hover:text-blue-800 dark:hover:text-blue-900">example link</a>
  . Give it a click if you like.
</Alert>
<Alert color="red" dismissable>
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  A simple info alert with an
  <a href="/" class="font-semibold underline hover:text-red-800 dark:hover:text-red-900">example link</a>
  . Give it a click if you like.
</Alert>
<Alert color="green" dismissable>
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  A simple info alert with an
  <a href="/" class="font-semibold underline hover:text-green-800 dark:hover:text-green-900">example link</a>
  . Give it a click if you like.
</Alert>
<Alert color="yellow" dismissable transition={fly} params={{ x: 200 }}>
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  An alert with non default animation - fly away.
</Alert>
<Alert color="dark" dismissable>
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  An alert with the custom dismissal button.
  <Button slot="close-button" size="xs" let:close on:click={close} class="ms-auto">Dissmiss</Button>
</Alert>

Border accent #

Use the following alert components with a border accent as an alternative style.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-4"><div role="alert" class="bg-primary-50 dark:bg-gray-800 text-primary-800 dark:text-primary-400 border-primary-500 dark:border-primary-200 divide-primary-500 dark:divide-primary-200 p-4 gap-3 text-sm flex items-center border-t-4"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-1ffo80p">Info alert!</span>
Change a few things up and try submitting again.</div> </div>    <div role="alert" class="bg-red-50 dark:bg-gray-800 text-red-800 dark:text-red-400 border-red-300 dark:border-red-800 divide-red-300 dark:divide-red-800 p-4 gap-3 text-sm flex items-center border-t-4"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-pk1fty">Danger alert!</span>
Change a few things up and try submitting again.</div> </div>    <div role="alert" class="bg-green-50 dark:bg-gray-800 text-green-800 dark:text-green-400 border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800 p-4 gap-3 text-sm flex items-center border-t-4"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-5yq51q">Success alert!</span>
Change a few things up and try submitting again.</div> </div>    <div role="alert" class="bg-yellow-50 dark:bg-gray-800 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-800 divide-yellow-300 dark:divide-yellow-800 p-4 gap-3 text-sm flex items-center border-t-4"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-bshnzn">Warning alert!</span>
Change a few things up and try submitting again.</div> </div>    <div role="alert" class="bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border-gray-500 divide-gray-500 p-4 gap-3 text-sm flex items-center border-t-4 flex-row-reverse"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <div><span class="font-medium" data-svelte-h="svelte-1iirds9">Dark alert!</span>
Change a few things up and try submitting again.</div> </div>   </div>
Svelte
<script>
  import { Alert } from 'flowbite-svelte';
  import { InfoCircleSolid } from 'flowbite-svelte-icons';
</script>

<Alert rounded={false} class="border-t-4">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Info alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert color="red" rounded={false} class="border-t-4">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Danger alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert color="green" rounded={false} class="border-t-4">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Success alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert color="yellow" rounded={false} class="border-t-4">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Warning alert!</span>
  Change a few things up and try submitting again.
</Alert>
<Alert color="dark" rounded={false} class="border-t-4 flex-row-reverse">
  <InfoCircleSolid slot="icon" class="w-4 h-4" />
  <span class="font-medium">Dark alert!</span>
  Change a few things up and try submitting again.
</Alert>

Additional content #

The following alert components can be used if you wish to disclose more information inside the element.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-4"><div role="alert" class="bg-primary-50 dark:bg-gray-800 text-primary-800 dark:text-primary-400 rounded-lg border-primary-500 dark:border-primary-200 divide-primary-500 dark:divide-primary-200 p-4 gap-3 text-sm"> <div class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <span class="text-lg font-medium" data-svelte-h="svelte-1lobu2q">This is a info alert</span></div> <p class="mt-2 mb-4 text-sm" data-svelte-h="svelte-1mni4v9">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.</p> <div class="flex gap-2"><button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center px-3 py-2 text-xs text-white bg-primary-700 hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 focus-within:ring-primary-300 dark:focus-within:ring-primary-800 rounded-lg"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-4 h-4 me-2" role="img" aria-label="eye solid" viewBox="0 0 20 14"><path fill="currentColor" d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"></path></svg> View more</button>  <button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center px-3 py-2 text-xs text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-700 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600 focus-within:ring-primary-300 dark:focus-within:ring-primary-800 rounded-lg">Go to Home</button> </div> </div>    <div role="alert" class="bg-green-50 dark:bg-gray-800 text-green-800 dark:text-green-400 rounded-lg border-green-300 dark:border-green-800 divide-green-300 dark:divide-green-800 p-4 gap-3 text-sm"> <div class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" slot="icon" class="shrink-0 w-4 h-4" role="img" aria-label="info circle solid" viewBox="0 0 20 20"><path fill="currentColor" d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"></path></svg>  <span class="text-lg font-medium" data-svelte-h="svelte-1lobu2q">This is a info alert</span></div> <p class="mt-2 mb-4 text-sm" data-svelte-h="svelte-1mni4v9">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.</p> <div class="flex gap-2"><button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center px-3 py-2 text-xs text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 focus-within:ring-green-300 dark:focus-within:ring-green-800 rounded-lg"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="shrink-0 w-4 h-4 me-2" role="img" aria-label="eye solid" viewBox="0 0 20 14"><path fill="currentColor" d="M10 0C4.612 0 0 5.336 0 7c0 1.742 3.546 7 10 7 6.454 0 10-5.258 10-7 0-1.664-4.612-7-10-7Zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"></path></svg> View more</button>  <button type="button" class="text-center font-medium focus-within:ring-4 focus-within:outline-none inline-flex items-center justify-center px-3 py-2 text-xs text-green-700 hover:text-white border border-green-700 hover:bg-green-800 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 focus-within:ring-green-300 dark:focus-within:ring-green-800 rounded-lg">Go to Home</button> </div> </div>   </div>
Svelte
<script>
  import { Alert, Button } from 'flowbite-svelte';
  import { InfoCircleSolid, EyeSolid } from 'flowbite-svelte-icons';
</script>

<Alert>
  <div class="flex items-center gap-3">
    <InfoCircleSolid slot="icon" class="w-4 h-4" />
    <span class="text-lg font-medium">This is a info alert</span>
  </div>
  <p class="mt-2 mb-4 text-sm">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.</p>
  <div class="flex gap-2">
    <Button size="xs"><EyeSolid class="w-4 h-4 me-2" />View more</Button>
    <Button size="xs" outline>Go to Home</Button>
  </div>
</Alert>
<Alert color="green">
  <div class="flex items-center gap-3">
    <InfoCircleSolid slot="icon" class="w-4 h-4" />
    <span class="text-lg font-medium">This is a info alert</span>
  </div>
  <p class="mt-2 mb-4 text-sm">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.</p>
  <div class="flex gap-2">
    <Button size="xs" color="green"><EyeSolid class="w-4 h-4 me-2" />View more</Button>
    <Button size="xs" outline color="green">Go to Home</Button>
  </div>
</Alert>

Custom color #

Use color='none' to disable coloring. Then use class to add your custom colors classes.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-4"><div role="alert" class="rounded-lg p-4 gap-3 text-sm bg-sky-500 text-white"> Your content </div>   </div>
Svelte
<Alert color="none" class="bg-sky-500 text-white">Your content</Alert>

Events #

Use the close event with dismissable prop.

<div class="w-full mx-auto bg-gradient-to-r bg-white dark:bg-gray-900 p-6 flex flex-col gap-4"><div><div role="alert" class="bg-primary-50 dark:bg-gray-800 text-primary-800 dark:text-primary-400 rounded-lg border-primary-500 dark:border-primary-200 divide-primary-500 dark:divide-primary-200 p-4 gap-3 text-sm flex items-center"> <div>Close me</div>  <button type="button" class="focus:outline-none whitespace-normal m-0.5 rounded-lg focus:ring-2 p-1.5 focus:ring-gray-400 hover:bg-gray-100 ms-auto -me-1.5 -my-1.5 dark:hover:bg-gray-700" aria-label="Close"><span class="sr-only">Close</span> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button>   </div> </div>  </div>
Svelte
<script>
  import { Alert } from 'flowbite-svelte';
  const closeAlert = () => {
    alert('Clicked closeAlert.');
  };
</script>

<Alert dismissable on:close={closeAlert}>Close me</Alert>

Component data #

Alert styling #

Use the class prop to overwrite defaultClass.

The component has the following props, type, and default values. See types page for type information.

References #

Flowbite Alerts

Alert component on GitHub

Accordion

Avatar