Documentation

Toast

A succinct message that is displayed temporarily.

Examples

import { useToast, Button } from 'kalki-design'

export function Example() {
  const { addToast } = useToast()

  return (
    <Button 
      onClick={() =>
        addToast('Your changes were saved successfully.', {
          type: 'info',
          title: 'Profile Updated',
          duration: 5000,
          position: 'bottom-right',
        })
      }
    >
      Show Toast
    </Button>
  )
}

Installation

npx kalki-design add toast

Usage

import { Toast } from 'kalki-design'

export default function Example() {
  return <Toast />
}

API Reference

NameTypeDefaultDescription
NametypeType'info' | 'success' | 'warning' | 'error'Default'info'DescriptionVisual intent of the toast.
NametitleTypestringDefault—DescriptionPrimary title.
NamemessageTypestringDefault—DescriptionSub-message or description.
NamedurationTypenumberDefault5000DescriptionMilliseconds before auto-dismissal. 0 to disable.
NamepositionType'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center'Default'bottom-right'DescriptionScreen position where the toast appears.
NameonCloseTypefunctionDefault—DescriptionCallback fired when dismissed.