# Toast

Give users short, non-disruptive feedback on the outcome of an action.

Tabs: [Guidelines](/components/web/toast/toast.guidelines.md) · [Code](/components/web/toast/toast.code.md)

## Basic usage

Mount `ToasterProvider` once near the root of the app, inside `TelescopeProvider`, and render `Toaster` where the toasts should appear. The provider holds the toasts, the toaster renders them.

```tsx
import {Toaster, ToasterProvider} from '@pleo-io/telescope'

const App = () => (
    <ToasterProvider>
        <Routes />
        <Toaster isLoggedIn isNavigationVisible={false} navigationWidth={0} />
    </ToasterProvider>
)
```

Then show a toast from any component below the provider with `useToaster`.

```tsx
import {useToaster} from '@pleo-io/telescope'

const SaveButton = () => {
    const {showToast} = useToaster()

    return <button onClick={() => showToast('Changes saved', {variant: 'positive'})}>Save</button>
}
```

## Variants and dismissal

`variant` is one of `info` (default), `positive`, `warning` and `negative`. Info and positive toasts dismiss after 5 seconds and warning toasts after 8 seconds. Negative toasts stay until the user closes them. Set `persistent` to keep any toast until it's removed.

- `hideToast(id)` removes a toast without calling its `onDismiss`. Use it for cleanup.
- `dismissToast(id)` removes a toast and calls its `onDismiss`, like the close button and swipe do.

## Action and link

```tsx
showToast('Tax code archived', {
    variant: 'positive',
    action: {label: 'Undo', onClick: undoArchive},
    link: {href: '/tax-codes', text: 'View tax codes'},
})
```

## Localisation

The close button label and the visually hidden status prefix are read from the `TelescopeProvider` translations (`Toast.CloseButton` and `statusLabels`).

## API reference

### Toaster

#### `isLoggedIn` (required)

Type: `boolean`

Default: -

No description available

#### `isNavigationVisible` (required)

Type: `boolean`

Default: -

No description available

#### `navigationWidth` (required)

Type: `number`

Default: -

No description available