# Toast

For live notification queues without React, mount a `ToastRegion` and call the imperative
`toast` API from any client script. In React apps, use `ToastProvider` with `useToast()` or
`toast` from `@var-ui/react`.

## Examples

### Default

```tsx
import { Button, ToastProvider, toast, useToast } from '@var-ui/react';

function NotifyButton() {
  const { add } = useToast();
  return <Button onPress={() => add({ tone: 'success', title: 'Saved' })}>Save</Button>;
}

<ToastProvider>
  <NotifyButton />
</ToastProvider>

// Imperative API (requires ToastProvider mounted)
toast.show({ tone: 'info', title: 'Hello' });
toast.update(id, { title: 'Updated' });
toast.dismiss(id);
```

```astro
---
import { ToastRegion } from '@var-ui/astro';
---

<ToastRegion placement="bottom-end" />

<script>
  import { toast } from '@var-ui/astro';

  toast.show({ tone: 'success', title: 'Saved', description: 'Your draft was stored.' });
</script>
```

```html
<div class="var-ui-toast" role="status">…</div>
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| title | string | yes |  | Bold headline shown in the toast body. |
| className | string \| undefined | no |  | Additional CSS class names merged onto the root element. |
| description | string \| undefined | no |  | Supporting copy shown below the title. |
| dismissLabel | string \| undefined | no | Dismiss | Accessible label for the dismiss button. |
| onDismiss | (() => void) \| undefined | no |  | When provided, renders a dismiss button that calls this handler on press. |
| appearance | SurfaceAppearance \| undefined | no |  |  |
| tone | FeedbackTone \| undefined | no |  |  |

## Accessibility

Toasts render in a live region with appropriate status semantics. Dismiss controls
expose an accessible name and keyboard support via React Aria Components.