---
title: Toast
description: The Toast component displays brief notifications to the user in the bottom-right corner of the screen.
category: Feedback
related: [Alert, Button]
commonPatterns: [success-toast, error-toast, action-toast]
---

Source: https://clickhouse.design/click-ui/toast

# Toast

Toast provides non-blocking, lightweight feedback for user interactions such as create / update / delete operations. Toasts appear in the bottom-right corner and automatically dismiss after a few seconds.

## Example

## Props

| Prop        | Type                                              | Default value | Description                                                                                           |
| ----------- | ------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------- |
| type        | `"default" \| "success" \| "warning" \| "danger"` | `"default"`   | Visual type variant that determines the toast color and icon                                          |
| title       | `string`                                          | `undefined`   | Title text displayed prominently in the toast notification                                            |
| description | `ReactNode`                                       | `undefined`   | Additional description text or content displayed below the title                                      |
| duration    | `number`                                          | `5000`        | Duration in milliseconds before the toast automatically dismisses                                     |
| actions     | `Array<ButtonProps & { altText: string }>`        | `[]`          | Array of action buttons to display in the toast, each with button props and altText for accessibility |

```tsx
import { ToastProvider, useToast, Button } from '@clickhouse/click-ui'

function Example() {
return (
  <ToastProvider>
    <ToastTrigger />
  </ToastProvider>
)
}

function ToastTrigger() {
const { createToast } = useToast()
return (
  <Button onClick={() => createToast({ title: 'Saved', type: 'success', description: 'Your changes have been saved.' })} label="Show toast" />
)
}
```

## Quick start

```tsx
import { ToastProvider, useToast, Button } from '@clickhouse/click-ui'

function App() {
return (
  <ToastProvider>
    <MyComponent />
  </ToastProvider>
)
}

function MyComponent() {
const { createToast } = useToast()
return (
  <Button 
    onClick={() => createToast({ 
      title: 'Saved', 
      type: 'success', 
      description: 'Your changes have been saved.' 
    })} 
    label="Save" 
  />
)
}
```

## Related components

- **Alert**: For persistent, inline notifications that don't auto-dismiss.
- **Button**: Commonly used to trigger toast notifications.

## Common use cases

### Success toast

```tsx
import { ToastProvider, useToast, Button } from '@clickhouse/click-ui'

function SuccessToast() {
const { createToast } = useToast()
return (
  <Button 
    onClick={() => createToast({ 
      title: 'Success!', 
      type: 'success', 
      description: 'Your changes have been saved.' 
    })} 
    label="Save" 
  />
)
}
```

### Error toast

```tsx
import { ToastProvider, useToast, Button } from '@clickhouse/click-ui'

function ErrorToast() {
const { createToast } = useToast()
return (
  <Button 
    onClick={() => createToast({ 
      title: 'Error', 
      type: 'danger', 
      description: 'Something went wrong. Please try again.' 
    })} 
    label="Show Error" 
  />
)
}
```

### Action toast

```tsx
import { ToastProvider, useToast, Button } from '@clickhouse/click-ui'

function ActionToast() {
const { createToast } = useToast()
return (
  <Button 
    onClick={() => createToast({ 
      title: 'Item deleted', 
      type: 'success',
      description: 'The item has been deleted.',
      actions: [
        { label: 'Undo', altText: 'Undo deletion', onClick: () => {} }
      ]
    })} 
    label="Delete" 
  />
)
}
```