Toast

Ephemeral notification messages triggered via a toast() function. Renders in a global Toaster container with auto-dismiss.

Example

toast() Function

Param	Type	Default	Description
`message`	`string`	—	Toast message text
`variant`	`'success' \| 'danger' \| 'info'`	`'info'`	Visual style
`duration`	`number`	`3000`	Auto-dismiss time in ms (0 = manual)

Returns the toast id (string), which can be passed to dismiss(id) for manual removal.

Components

Component	Description
`Toaster`	Renders all active toasts. Place once in your layout.
`Toast`	Individual toast element (used internally by Toaster).

Toast Props (internal)

Prop	Type	Default	Description
`item`	`ToastItem`	—	Toast data object with id, message, variant, duration
`class`	`string`	—	Additional CSS classes

Usage

<script>
  import { Toaster, toast, dismiss, Button } from '@chrissnell/chonky-ui';
</script>

<!-- Place Toaster once in your layout -->
<Toaster />

<Button onclick={() => toast('Saved successfully', 'success')}>
  Save
</Button>

<Button onclick={() => toast('Connection lost', 'danger', 5000)}>
  Error (5s)
</Button>

<!-- Manual dismiss -->
<Button onclick={() => {
  const id = toast('Processing...', 'info', 0);
  setTimeout(() => dismiss(id), 2000);
}}>
  Manual dismiss
</Button>