toast — @ossrandom/design-system

Import

import { toast } from "@ossrandom/design-system";

Examples

Trigger toasts

Mount `<ToastRegion />` once near the root, then call `toast.show(...)` from anywhere.

↗ Playground

(() => {
  function Demo() {
    return <Space size="sm">
      <Button onClick={() => toast.show({ title: "Saved", severity: "success" })}>Success</Button>
      <Button onClick={() => toast.show({ title: "Heads up", severity: "info" })}>Info</Button>
      <Button onClick={() => toast.show({ title: "Failed", severity: "danger" })}>Danger</Button>
    </Space>;
  }
  return <><Demo /><ToastRegion /></>;
})()

API

Hooks have no prop interface. Call toast() from inside a component to use it.