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.

  • 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.

  • Svelte
<Alert>
  <InfoCircleSolid  class="flex-shrink-0 text-primary-800 dark:text-primary-400 inline w-4 h-4 mr-3" />
  <span class="font-medium">Default alert!</span> Change a few things up and try submitting again.
</Alert>
<Alert color="blue">
  <InfoCircleSolid  class="flex-shrink-0 text-blue-800 dark:text-blue-400 inline w-4 h-4 mr-3" />
  <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</Alert>
<Alert color="red">
  <InfoCircleSolid  class="flex-shrink-0 text-red-800 dark:text-red-400 inline w-4 h-4 mr-3" />
  <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
</Alert>
<Alert color="green">
  <InfoCircleSolid  class="flex-shrink-0 text-green-800 dark:text-green-400 inline w-4 h-4 mr-3" />
  <span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
</Alert>
<Alert color="yellow">
  <InfoCircleSolid  class="flex-shrink-0 text-yellow-800 dark:text-yellow-400 inline w-4 h-4 mr-3" />
  <span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
</Alert>
<Alert color="dark">
  <InfoCircleSolid  class="flex-shrink-0 text-gray-800 dark:text-gray-400 inline w-4 h-4 mr-3" />
  <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.

  • Svelte
<Alert border>
  <InfoCircleSolid  class="flex-shrink-0 text-primary-800 dark:text-primary-400 inline w-4 h-4 mr-3" />
  <span class="font-medium">Default alert!</span> Change a few things up and try submitting again.
</Alert>
<Alert border color="blue">
  <InfoCircleSolid  class="flex-shrink-0 text-blue-800 dark:text-blue-400 inline w-4 h-4 mr-3" />
  <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</Alert>
<Alert border color="red">
  <InfoCircleSolid  class="flex-shrink-0 text-red-800 dark:text-red-400 inline w-4 h-4 mr-3" />
  <span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
</Alert>
<Alert border color="green">
  <InfoCircleSolid  class="flex-shrink-0 text-green-800 dark:text-green-400 inline w-4 h-4 mr-3" />
  <span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
</Alert>
<Alert border color="yellow">
  <InfoCircleSolid  class="flex-shrink-0 text-yellow-800 dark:text-yellow-400 inline w-4 h-4 mr-3" />
  <span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
</Alert>
<Alert border color="dark">
  <InfoCircleSolid  class="flex-shrink-0 text-gray-800 dark:text-gray-400 inline w-4 h-4 mr-3" />
  <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.

  • Svelte
<Alert class="!items-start">
  <span slot="icon">
  <InfoCircleSolid  class="flex-shrink-0 text-primary-800 dark:text-primary-400 inline w-4 h-4 mr-3" />
  <span class="sr-only">Info</span>
  </span>
  <p class="font-medium">Ensure that these requirements are met:</p>
  <ul class="mt-1.5 ml-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  class="flex-shrink-0 text-blue-800 dark:text-blue-400 inline w-4 h-4 mr-3" />
  <span class="sr-only">Info</span>
  </span>
  <p class="font-medium">Ensure that these requirements are met:</p>
  <List class="mt-1.5 ml-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.

  • Svelte
<script>
  import { Alert, Button } from "flowbite-svelte";
  import { InfoCircleSolid } from 'flowbite-svelte-icons'
  import { fly } from 'svelte/transition';
</script>
<Alert dismissable>
    <InfoCircleSolid  class="flex-shrink-0 text-primary-800 dark:text-primary-400 inline w-4 h-4 mr-3" />
    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  class="flex-shrink-0 text-blue-800 dark:text-blue-400 inline w-4 h-4 mr-3" />
    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  class="flex-shrink-0 text-red-800 dark:text-red-400 inline w-4 h-4 mr-3" />
    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  class="flex-shrink-0 text-green-800 dark:text-green-400 inline w-4 h-4 mr-3" />
    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  class="flex-shrink-0 text-yellow-800 dark:text-yellow-400 inline w-4 h-4 mr-3" />
    An alert with non default animation - fly away.
  </Alert>
  <Alert color="dark" dismissable>
    <InfoCircleSolid  class="flex-shrink-0 text-gray-800 dark:text-gray-400 inline w-4 h-4 mr-3" />
    An alert with the custom dismissal button.
    <Button slot="close-button" size="xs" let:close on:click={close} class="ml-auto">Dissmiss</Button>
</Alert>

Border accent #

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

  • Svelte
<Alert rounded={false} class="border-t-4">
  <InfoCircleSolid  class="flex-shrink-0 text-primary-800 dark:text-primary-400 inline w-4 h-4 mr-3" />
  <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  class="flex-shrink-0 text-red-800 dark:text-red-400 inline w-4 h-4 mr-3" />
  <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  class="flex-shrink-0 text-gree-800 dark:text-green-400 inline w-4 h-4 mr-3" />
  <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  class="flex-shrink-0 text-yellow-800 dark:text-yellow-400 inline w-4 h-4 mr-3" />
  <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  class="flex-shrink-0 text-gray-800 dark:text-gray-400 inline w-4 h-4 mr-3" />
  <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.

  • Svelte
<Alert>
  <div class="flex items-center gap-3">
      <InfoCircleSolid  class="flex-shrink-0 text-primary-800 dark:text-primary-400 inline w-4 h-4 mr-3" />
    <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="flex-shrink-0 text-primary-800 dark:text-primary-400 inline w-4 h-4 mr-3" />View more</Button>
    <Button size="xs" outline class="dark:!text-primary-800">Go to Home</Button>
  </div>
</Alert>
<Alert color="green">
  <div class="flex items-center gap-3">
      <InfoCircleSolid  class="flex-shrink-0 text-green-800 dark:text-green-400 inline w-4 h-4 mr-3" />
    <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="flex-shrink-0 text-green-800 dark:text-green-400 inline w-4 h-4 mr-3" />View more</Button>
    <Button size="xs" outline color="green" class="dark:text-green-800">Go to Home</Button>
  </div>
</Alert>

Custom color #

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

  • Svelte
<Alert color='none' class='bg-sky-500 text-white'>
  Your content
</Alert>

Events #

Use the close event with dismissable prop.

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

Props #

Alert #

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

  • Use the class prop to overwrite defaultClass.
Name Type Default
dismissable boolean false
defaultClass string 'p-4 gap-3 text-sm'

Frame #

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

Name Type Default
tag string $$restProps.href ? 'a' : 'div'
color FrameColor 'default'
rounded boolean false
border boolean false
shadow boolean false
transition TransitionFunc null_transition
params object {}
node HTMLElement | undefined undefined
use Action<HTMLElement, any> noop
options string {}
role string | undefined undefined

Slots #

Name Description
default The first slot.
extra A slot after the default slot.

Forwarded Events #

on:blur
on:change
on:click
on:focus
on:keydown
on:keyup
on:mouseenter
on:mouseleave

References #

Accordion Avatar