Behive Tech Component Registry

Toast

v0.5.0Stable

A toast viewport to mount once, anywhere in the app; `showToast()` from anywhere then renders a dismissible, auto-expiring Radix toast in it.

pnpm add @behivetech/atoms.toast

Edit the code and the preview updates as you type. Every registry export is in scope — Toast, showToast from this package, plus React hooks and every other component in the registry.

PlaygroundOpen in new tab
const BasicToast = () => (
  <>
    <button
      type="button"
      onClick={() =>
        showToast({ title: "Saved", description: "Your changes were saved." })
      }
    >
      Show info toast
    </button>
    <button
      type="button"
      onClick={() => showToast({ title: "Published", variant: "success" })}
    >
      Show success toast
    </button>
    <button
      type="button"
      onClick={() =>
        showToast({ title: "Reservation expires soon", variant: "warning" })
      }
    >
      Show warning toast
    </button>
    <button
      type="button"
      onClick={() => showToast({ title: "Failed to save", variant: "error" })}
    >
      Show error toast
    </button>
    <button
      type="button"
      onClick={() =>
        showToast({
          title: "Structure moved",
          action: {
            label: "Undo",
            onClick: () => showToast({ title: "Move undone" }),
          },
        })
      }
    >
      Show toast with an action
    </button>
    <Toast />
  </>
);

render(<BasicToast />);