Logoapsara
DocumentationExamples
ToastToast wrapper and function. Toast internally uses Sonner - https://sonner.emilkowal.ski/
Installation
Import all parts and piece them together. 
import { ToastContainer, toast, Button } from '@raystack/apsara/v1'

<ToastContainer />
<Button variant="primary" onClick={() => toast.success('Data loaded successfully.',
        { 
          dismissible: true,
          action: <Button size="small" onClick={() => console.log('Toast appears')}>
            Click Me
          </Button>
        }
    )}>Trigger toast</Button>
Props
Core Props
  • description
    • Type: string
    • Description: Text shown below the title
    • Default: -
  • duration
    • Type: number
    • Description: Auto-close time in milliseconds
    • Default: 4000
  • position
    • Type: string
    • Description: Toast position on screen
    • Default: bottom-right
  • dismissible
    • Type: boolean
    • Description: Allow user to dismiss toast
    • Default: true
Appearance
  • icon
    • Type: ReactNode
    • Description: Leading icon
    • Default: -
  • invert
    • Type: boolean
    • Description: Inverts color scheme
    • Default: false
  • closeButton
    • Type: boolean
    • Description: Show close button
    • Default: false
  • unstyled
    • Type: boolean
    • Description: Remove default styling
    • Default: false
Interaction
  • action
    • Type: object
    • Description: Primary button config
    • Default: -
  • cancel
    • Type: object
    • Description: Secondary button config
    • Default: -
  • actionButtonStyle
    • Type: object
    • Description: Primary button styles
    • Default:
  • cancelButtonStyle
    • Type: object
    • Description: Secondary button styles
    • Default:
Callbacks
  • onDismiss
    • Type: function
    • Description: Called on manual dismiss
    • Default: -
  • onAutoClose
    • Type: function
    • Description: Called on auto-close
    • Default: -
  • id
    • Type: string
    • Description: Custom toast ID
    • Default: -