# Toaster

> Ephemeral, non-critical confirmations.

Source: https://ui.jcsoftdev.com/docs/components/toaster

Ephemeral, non-critical confirmations. Pass `action: { label, onClick }` to
`toast()` for an undo button. Critical messages belong in a banner instead.

## Import

```ts
import { Toaster } from "@jcsoftdev/ui/overlays";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/overlays/toaster`.

## Usage

```tsx
export const Default: Story = {
  render: (args) => (
    <>
      <Toaster {...args} />
      <Button onClick={() => toast("Cita agendada para Luis Ramírez, sábado 11:30")}>
        Agendar cita
      </Button>
    </>
  ),
};
```

_Source of the Storybook story._

## Props

This component declares no props of its own.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/overlays-toaster--default)
- [With Undo Action](/storybook/?path=/story/overlays-toaster--with-undo-action)
- [Open By Default](/storybook/?path=/story/overlays-toaster--open-by-default)
- [Top Right Stack](/storybook/?path=/story/overlays-toaster--top-right-stack)

## Source

`packages/ui/src/overlays/toaster/toaster.tsx`