Components

Toast

A short message about the result of an action that appears in a corner of the page, stacks and can be swiped away.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { Toast } from '@bigbang/ui';
Source: Toast.tsx
Storybook: Toast · Playground

Toast is in the @bigbang/ui package. Wrap the app once in a Toaster, inside the Provider.

import { Button, Provider, Toaster, useToast } from '@bigbang/ui';

<Provider locale="en-GB">
  <Toaster>
    <App />
  </Toaster>
</Provider>;

function SaveButton() {
  const toast = useToast();
  return <Button onClick={() => toast.show({ tone: 'success', title: 'Changes saved' })}>Save</Button>;
}

Props

childrenRequired

Description: The app; useToast works anywhere inside. Render one Toaster near the root, inside the Provider.
Type: ReactNode

limit

Description: Most toasts shown at once; older ones fade out of the stack.
Type: number
Default: 3

timeout

Description: Milliseconds before a toast closes. The timer pauses while the region is hovered or focused.
Type: number
Default: 5000

label

Description: Name of the toast region, reached with F6. Defaults to the ui.toast.region library string ("Bildirimler" or "Notifications").
Type: string

material

Description: 'solid' keeps the toasts solid under a glass Provider.
Type: 'auto' | 'solid'
Default: 'auto'

`useToast`

useToast() connects to the nearest Toaster and returns these methods:

Method	What it does
`show(options)`	Adds a toast and returns its id.
`update(id, options)`	Changes an open toast.
`close(id?)`	Closes one toast, or all of them without an id.
`promise(promise, { loading, success, error })`	Shows a loading toast with a spinner that becomes a success toast when the promise resolves and an error toast when it rejects. `success` and `error` can also be functions of the result.

`ToastOptions`

Option	Type	Description
`title`	`ReactNode`	What happened, in a few words. Required.
`description`	`ReactNode`	One more sentence, when the title is not enough.
`tone`	`'neutral' \| 'success' \| 'info' \| 'warning' \| 'danger'`	Colour and icon. Defaults to `neutral`.
`action`	`{ label, onClick }`	One action, such as “Undo”. The toast closes when it is pressed.
`timeout`	`number`	Milliseconds; `0` keeps it open. Values under 5000 are raised to 5000. Defaults to `0` for `danger` and for a toast with an `action`.
`id`	`string`	Reusing an id updates that toast instead of adding a new one.
`onClose`	`() => void`	Runs however the toast closes.

Data attributes

data-component="toaster": on the region. data-component="toast" and data-tone: on each toast (including loading).
data-expanded, data-limited, data-swiping, data-swipe-direction: from Base UI.