import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'

import * as ToastStories from './toast.stories.tsx';

<Meta of={ToastStories} />

# Toast with Sonner

We create a toast with sonner. For more documentation, please check the [Sonner Docs](https://sonner.emilkowal.ski/) repository.

### Usage
```tsx
import { Toaster, toast } from 'sonner'

// ...

function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast('My first toast')}>
        Give me a toast
      </button>
    </div>
  )
}
```

<Canvas of={ToastStories.ToastExamples} />

<Controls />
