Component
Toast
A notification system with auto-dismiss, stacking, and a progress bar. Uses a context provider pattern — wrap your app in <ToastProvider>and call useToast() anywhere.
Variants
Click the buttons above to trigger toasts in the top-right corner.
Usage
tsx
import { ToastProvider, useToast, Button } from 'starkit-ui';
// 1. Wrap your app
function App() {
return (
<ToastProvider position="top-right">
<MyComponent />
</ToastProvider>
);
}
// 2. Use the hook anywhere inside the provider
function MyComponent() {
const { toast, dismissAll } = useToast();
return (
<Button onClick={() =>
toast({
title: 'Saved',
message: 'Your changes have been saved.',
variant: 'success',
duration: 3000,
})
}>
Save
</Button>
);
}
Features
- Auto-dismiss — configurable duration with progress bar
- Stacking — multiple toasts stack vertically
- 4 positions — top-right, top-left, bottom-right, bottom-left
- Manual dismiss — close button on each toast
- Enter/exit animations — slide in/out
role="alert"andaria-live="assertive"
Provider Props
| Prop | Type | Default | Description |
|---|---|---|---|
| position | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-right' | Screen position for toast stack |
| maxToasts | number | 5 | Maximum number of visible toasts |
Toast Data
| Prop | Type | Default | Description |
|---|---|---|---|
| message * | string | — | Toast body text |
| title | string | — | Optional bold title |
| variant | 'default' | 'success' | 'danger' | 'info' | 'default' | Color variant |
| duration | number | 4000 | Auto-dismiss time in ms (0 for persistent) |