# Toast

Shows a brief notification that dismisses itself.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Toast.tsx)

## Overview

Toasts are brief notifications queued with a hook and rendered in a live region.

Use them for non-critical confirmations. Show critical errors inline or in a dialog.

## Examples

### Basic

```tsx
import { Button, Toast } from '@tempoxyz/ds'

function Trigger() {
  const toast = Toast.useToast()

  return (
    <Button
      onClick={() =>
        toast.add({ description: 'Transfers settle in seconds.', title: 'Payment sent' })
      }
      size="small"
      variant="secondary"
    >
      Show toast
    </Button>
  )
}

export function Demo() {
  return (
    <Toast.Provider>
      <Trigger />
      <Toast.Viewport />
    </Toast.Provider>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Toast/Basic.tsx)

### Intent

Pass `intent` to `toast.add` as `neutral`, `info`, `positive`, `warning`, or `negative`. It defaults to `neutral`.

```tsx
import { Button, style, Toast } from '@tempoxyz/ds'

const intents = ['neutral', 'info', 'positive', 'warning', 'negative'] as const

function Triggers() {
  const toast = Toast.useToast()

  return (
    <div {...styles.row()}>
      {intents.map((intent) => (
        <Button
          key={intent}
          onClick={() =>
            toast.add({
              description: 'Transfers settle in seconds.',
              intent,
              title: `${intent} toast`,
            })
          }
          size="small"
          variant="secondary"
        >
          {intent}
        </Button>
      ))}
    </div>
  )
}

export function Demo() {
  return (
    <Toast.Provider>
      <Triggers />
      <Toast.Viewport />
    </Toast.Provider>
  )
}

namespace styles {
  export const row = style({ alignItems: 'center', display: 'flex', flexWrap: 'wrap', gap: '3' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Toast/Intent.tsx)

### Action

Pass an `action` with a `label` to add a button. Set `timeout: 0` to keep the toast until it is dismissed.

```tsx
import { Button, Toast } from '@tempoxyz/ds'

function Trigger() {
  const toast = Toast.useToast()

  return (
    <Button
      onClick={() =>
        toast.add({
          action: { label: 'Undo' },
          intent: 'positive',
          timeout: 0,
          title: 'Archived',
        })
      }
      size="small"
      variant="secondary"
    >
      With action
    </Button>
  )
}

export function Demo() {
  return (
    <Toast.Provider>
      <Trigger />
      <Toast.Viewport />
    </Toast.Provider>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Toast/Action.tsx)

## Guidelines

TODO: Write guidelines for Toast.