# @forter/toast

> toast from Forter Components

Latest version **2.4.3** (published 2024-12-22) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @forter/toast
pnpm add @forter/toast
yarn add @forter/toast
bun add @forter/toast
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.4.3 |
| Published | 2024-12-22 |
| First published | 2019-12-17 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 78.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Forter Developers |
| Maintainers | forter-npm, lirown, oweingart |
| Keywords | web-components, custom-elements, lit-element, lit-element-2.x |

## Links

- npm: https://www.npmjs.com/package/@forter/toast
- Repository: https://github.com/forter/web-components
- Homepage: https://github.com/forter/web-components#readme
- Issues: https://github.com/forter/web-components/issues
- npm.io page: https://npm.io/package/@forter/toast

## Dependencies (1)

- [@forter/core](https://npm.io/package/@forter/core.md) ^2.0.5

## Recent versions

- 2.4.3 (latest) — 2024-12-22
- 2.4.2 — 2024-04-01
- 2.4.1 — 2024-04-01
- 2.4.0 — 2022-10-03
- 2.3.3 — 2022-04-03
- 2.3.2 — 2022-03-31
- 2.3.1 — 2022-03-30
- 2.3.0 — 2021-11-04
- 2.2.0 — 2020-10-28
- 2.1.9 — 2020-04-06
- 2.1.8 — 2020-04-06
- 2.1.7 — 2020-03-17
- 2.1.6 — 2020-02-05
- 2.1.5 — 2020-02-04
- 2.1.4 — 2020-01-10
- … 6 more at https://npm.io/package/@forter/toast/versions

## README

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

---
_Source: https://npm.io/package/@forter/toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._