# Sonner

## Example

```svelte
<script lang="ts">
	import { Button, toast } from '@foxui/all';
</script>

<div class="not-prose flex flex-wrap gap-4">
	<Button
		onclick={() =>
			toast('Hello there', {
				description: 'General Kenobi!'
			})}>Default</Button
	>

	<Button
		variant="green"
		onclick={() =>
			toast.success('Success!', {
				description: "You are strong and wise and I'm very proud of you!"
			})}>Success</Button
	>
	<Button
		variant="red"
		onclick={() =>
			toast.error('Error!', {
				description: 'These are not the droids you are looking for.'
			})}>Error</Button
	>
	<Button
		variant="blue"
		onclick={() =>
			toast.info('Info!', {
				description: 'I heard spinning is a good trick.'
			})}>Info</Button
	>
</div>
```

## Documentation

## Usage

In your root layout:

```svelte
<Toaster />
```

In your page:

```svelte
<Button onclick={handleClick}>Default</Button>
```

## Sources

Based on "sonner" (https://sonner.emilkowal.ski/)

## API Reference

### Toaster
A toast notification container. Place once in your layout and use the toast() function to show notifications. Built on svelte-sonner.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| colors | `{ default?: Colors; success?: Colors; error?: Colors; info?: Colors }` | `{ default: 'accent', success: 'green', error: 'red', info: 'blue' }` | Color mapping for toast types. Colors can be: 'blue' | 'red' | 'yellow' | 'green' | 'indigo' | 'purple' | 'pink' | 'orange' | 'teal' | 'emerald' | 'lime' | 'cyan' | 'sky' | 'rose' | 'amber' | 'violet' | 'fuchsia' | 'base' | 'accent'. |