Toast

Stable

Temporary notification messages with automatic dismiss.

Import

import { ToastProvider, useToast } from '@brutal-ui/react';

Setup

Wrap your app with ToastProvider at the root level:

import { ToastProvider } from '@brutal-ui/react';

function App() {
  return (
    <ToastProvider>
      {/* Your app content */}
    </ToastProvider>
  );
}

Basic Usage

import { useToast } from '@brutal-ui/react';

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

  return (
    <Button
      onClick={() => 
        addToast({ 
          message: 'Operation successful!', 
          type: 'success' 
        })
      }
    >
      Show Toast
    </Button>
  );
}

Toast Types

Success: For positive confirmations
Error: For failures or problems
Warning: For cautionary messages
Info: For general information

Props

addToast Options
OptionTypeDefaultDescription
messagestring-Toast message text
typestring"info"success | error | warning | info
durationnumber3000Duration in milliseconds