Alert animation

Examples

You can use Svelte animation by adding a custom event handler using the handlebtn1 prop.

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

let alerts = [
  {
    id: 'alert1',
    btnColor: 'blue',
    text: 'Alert 1'
  },
  {
    id: 'alert2',
    btnColor: 'green',
    text: 'Alert 2'
  },
  {
    id: 3,
    btnColor: 'purple',
    text: 'Alert 3'
  }
];
function remove(alert) {
  alerts = alerts.filter((t) => t !== alert);
}
</script>

{#each alerts as item (item.id)}
	<div animate:flip="{{ delay: 500 }}">
		<Alert alertId={item.id} color={item.btnColor} btn1 on:handlebtn1={() => remove(item)}>
			{item.text}
		</Alert>
	</div>
{/each}

Props

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

Related components

Default Alert

Border Alert

Information Alert

Animation

References

Flowbite Alerts