Skip to content

Toast

Brief messages that stack in a corner and dismiss themselves.

'use client';

import { Button, ToastProvider, useToast } from '@brand-studio/ui';

function AddToBasket() {
  const toast = useToast();
  return (
    <Button onClick={() => toast.add({ title: 'Added to basket', description: 'Ethiopia Guji, 250 g' })}>
      Add to basket
    </Button>
  );
}

export default function ToastDemo() {
  return (
    <ToastProvider>
      <AddToBasket />
    </ToastProvider>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, ToastProvider } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { ToastProvider, useToast } from '@brand-studio/ui';

function SaveButton() {
  const toast = useToast();
  return <Button onClick={() => toast.add({ title: 'Saved' })}>Save</Button>;
}

<ToastProvider>
  <SaveButton />
</ToastProvider>

Accessibility

Toasts are announced to screen readers and dismiss after five seconds; hovering or focusing pauses the timer.
F6 moves focus to the toast region. Swipe or press the close button to dismiss.
Call useToast() anywhere inside ToastProvider.

API Reference

Prop	Type	Default
`children`	`React.ReactNode`	–
`timeout?`	`number`	`5000`
`limit?`	`number`	`3`
`closeLabel?`	`string`	`'Dismiss'`