Toast

Stable

A succinct message that is displayed temporarily. Includes progress bars and cyberpunk styling.

Examples

Usage

tsx
import { ToastProvider, useToast, Button } from '@siberui/react';

function App() {
  return (
    <ToastProvider position="bottom-right">
      <MyComponent />
    </ToastProvider>
  )
}

function MyComponent() {
  const { toast } = useToast();

  return (
    <Button onClick={() => toast({ 
      title: 'Threat Detected', 
      description: 'Unauthorized access attempt blocked.',
      variant: 'destructive'
    })}>
      Show Toast
    </Button>
  )
}

API Reference

PropertyDescriptionTypeDefault
titleThe title of the toast.string-
descriptionThe description of the toast.string-
variantThe visual style of the toast."info" | "success" | "warning" | "destructive"-
durationDuration in ms before auto-dismissing.number4000