Alert

Set up

Import Alert and set variables in the script tag. 

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

Default alert

<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

<Alert id="alert-red" color="red" icon={XCircleSolid}>
  <span slot="content">
    <span class="font-medium">
      Info alert!
    </span>
    Change a few things up and try submitting again.
  </span>
</Alert>

Dismissable alerts

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

Rounded

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

With border

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

Additional content

<Alert id="alert-extra" color="blue" icon={InformationCircleSolid} 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">
        <EyeSolid 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 type-list page for type information.

Name Type Default
color Colors 'blue'
icon typeof SvelteComponent | null null
closeBtn boolean false
rounded boolean true
borderAccent boolean false

Related components

Icons

References

Flowbite Alerts