@forter/toast

fc-toast

An element to emphasize message after actions

Usage

<script>
   import '@forter/toast';
</script>

<fc-toast show>
   Toast message is here!
</fc-toast>

Examples

<!-- toasts -->

<p> Intents: </p>
<fc-button onclick="FC.toast({ message: 'Toast message is here' })">Default</fc-button>
<fc-button intent="primary" onclick="FC.toast.primary({ message: 'Toast message is here' })">Primary</fc-button>
<fc-button intent="secondary" onclick="FC.toast.secondary({ message: 'Toast message is here' })">Secondary</fc-button>
<fc-button intent="apply" onclick="FC.toast.apply({ message: 'Toast message is here' })">Apply</fc-button>
<fc-button intent="cancel" onclick="FC.toast.cancel({ message: 'Toast message is here' })">Cancel</fc-button>
<fc-button intent="success" onclick="FC.toast.success({ message: 'Toast success message is here' })">Success</fc-button>
<fc-button intent="warn" onclick="FC.toast.warn({ message: 'Toast danger message is here' })">Warn</fc-button>
<fc-button intent="danger" onclick="FC.toast.danger({ message: 'Toast danger message is here' })">Danger</fc-button>
<p> Loading: </p>
<fc-button onclick="FC.toast.loading({ message: 'Loading Top...'})">Loading</fc-button>
<p> Icon: </p>
<fc-button onclick="FC.toast({ message: 'Loading Top...', icon: 'admin' })"><fc-icon="admin" /> Icon </fc-button>
<p> Position </b></p>
<fc-button onclick="FC.toast({ message: 'Toast Message Top...'})"> Top...</fc-button>
<fc-button onclick="FC.toast({ message: 'Toast Message Bottom...', position: 'bottom'})"> Bottom...</fc-button>
<fc-toast show style="margin-bottom:25px">
   Toast message is here!
</fc-toast>

Properties

Events

CSS Custom Properties