npm package: @forter/toast
Description: toast from Forter Components
Author: Forter Developers
Latest version: 2.4.3

# fc-toast

An element to emphasize message after actions
<!-- Author: Liron Goldenberg <lgoldenberg@forter.com> -->

## Usage

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

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

## Examples
```html
<!-- 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

| Property   | Attribute  | Type                                             | Default   | Description                                 |
|------------|------------|--------------------------------------------------|-----------|---------------------------------------------|
| `icon`     | `icon`     | `boolean`                                        |           | toast icon. example: `admin`                |
| `intent`   | `intent`   | `"apply" \| "warn" \| "success" \| "danger" \| "cancel" \| "primary" \| "secondary"` | "default" | intent color to emphasize the type of toast |
| `loading`  | `loading`  | `boolean`                                        | false     | If the element is loading                   |
| `position` | `position` | `"top" \| "bottom"`                              | "top"     | appearing toast position                    |
| `show`     | `show`     | `boolean`                                        | false     | If the element is visible                   |

## Events

| Event  | Description                                      |
|--------|--------------------------------------------------|
| `open` | when opening a toast you get this event, example: `true` |

## CSS Custom Properties

| Property                | Description |
|-------------------------|-------------|
| `--fc-toast-color`      | color.      |
| `--fc-toast-icon-color` | icon color  |