Toast Components

Import the Toast component and Icons.

<script>
import {Toast} from 'flowbite-svelte'
import {FireOutline, CheckCircleSolid, PlusCircleOutline,ArchiveSolid} from 'svelte-heros'
</script>

Examples

Use fade, fly, slide, or blur for transitionType.

Fade examples

<Toast>
  <span slot="icon">
  <FireOutline />
  </span>
  <span slot="text">
    Transition type: fade
  </span>
</Toast>

Slide examples

You can use one of Svelte/easing.

<Toast transitionType="slide" iconColor='red'>
  <span slot="icon">
  <CheckCircleSolid class="text-red-500"/>
  </span>
  <span slot="text">
    Transition type: slide
  </span>
</Toast>

 <Toast transitionType="slide" iconColor='red' transitionParams="{{delay: 250, duration: 300, easing: quintOut}}">
  <span slot="icon">
  <CheckCircleSolid class="text-red-500"/>
  </span>
  <span slot="text">
    Transition type: slide, delay: 250, duration: 300, easing: quintOut
  </span>
</Toast>

<Toast transitionType="slide" iconColor='red' transitionParams="{{delay: 250, duration: 2000, easing: elasticOut}}">
  <span slot="icon">
  <CheckCircleSolid class="text-red-500"/>
  </span>
  <span slot="text">
    Transition type: slide, delay: 250, duration: 2000, easing: elasticOut
  </span>
</Toast>

Blur examples

<Toast transitionType="blur" iconColor='purple' transitionParams="{{amount: 10}}">
  <span slot="icon">
  <PlusCircleOutline class="text-purple-500"/>
  </span>
  <span slot="text">
    Transition type: blur, amount: 10
  </span>
</Toast>

<Toast transitionType="blur" iconColor='purple' transitionParams="{{amount: 50, delay: 1000}}">
  <span slot="icon">
  <PlusCircleOutline class="text-purple-500"/>
  </span>
  <span slot="text">
    Transition type: blur, amount: 50, delay 1000
  </span>
</Toast>

Fly examples

<Toast transitionType="fly" transitionParams="{{x: 200}}" iconColor="green">
  <span slot="icon">
  <ArchiveSolid  class="text-green-500"/>
  </span>
  <span slot="text">
    Transition type: fly right
  </span>
</Toast>

<Toast transitionType="fly" transitionParams="{{y: 200}}" iconColor="green">
  <span slot="icon">
  <ArchiveSolid  class="text-green-500"/>
  </span>
  <span slot="text">
    Transition type: fly down
  </span>
</Toast>

Icons

Use any icon components.

<script>
import {Toast} from 'flowbite-svelte'
import {FireIconOutline, CheckCircleIconSolid, PlusCircleIconOutline,ArchiveIconSolid} from 'svelte-heros'
</scrip>

Props

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

References