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

Quick Start

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" 
  />
)
}

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

Common Use Cases

Success Toast

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

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

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" 
  />
)
}

Alert Table