Toast

A temporary notification that appears outside the document flow.

#Import

import { Toaster, Toast, useToast, ToastData } from 'bmates-ui';

#Basic usage

The example below mirrors the primary Storybook composition and can be used as a starting point.

function SaveToast() {
  const { toast } = useToast();
  return (
    <Button
      onClick={() => toast({ title: 'Project saved', variant: 'success' })}
    >
      Show toast
    </Button>
  );
}

<SaveToast />
<Toaster position="bottom-right" />

#Preview

function SaveToast() {
  const { toast } = useToast();
  return (
    <Button
      onClick={() => toast({ title: 'Project saved', variant: 'success' })}
    >
      Show toast
    </Button>
  );
}

<SaveToast />
<Toaster position="bottom-right" />

#Prop previews

The examples below isolate the props that change visual output or interaction.

#Position

<Toaster position="top-right" />

#Danger variant

toast({ title: "Error", variant: "danger" })

#Component API

#Usage notes

• Every component in the table is exported from bmates-ui.
• Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
• For application-owned state, use a controlled value and its change handler instead of only a default* prop.