ToastProvider

Wraps your app to enable toast notifications; call useToast() from any descendant component to show or dismiss one, without prop-drilling a toast function through the tree.

function SaveButton() {
  const { show } = useToast();
  return (
    <Button onClick={() => show({ title: "Saved", variant: "success" })}>
      Save
    </Button>
  );
}

<ToastProvider>
  ...
</ToastProvider>

Examples

variant picks the same semantic set Badge uses — a success/error toast should reflect what actually happened, not just visual preference:

const { show } = useToast();

show({ title: "Changes saved", variant: "success" });
show({ title: "Couldn't connect", description: "Check your network and try again.", variant: "error" });

variant: "error" also switches the toast's role to alert instead of status, so assistive tech interrupts to announce it immediately rather than waiting for a pause — reserve it for failures that genuinely need that urgency, not routine confirmations.