Component reference

Toast

A short notice that appears over the page.

Preview

Host-controlled visibility

The host shows and dismisses toasts; no global queue or automatic timer is created.

packages/meowtail/stories/toast.stories.tsxline 13tsx

render() {
  const toast = signal<Child>(null);
  return (
    <Stack align="start">
      <Button
        onClick={() => {
          toast.value = (
            <Toast
              message="Saved the local sample."
              actions={
                <Button
                  variant="quiet"
                  onClick={() => {
                    toast.value = null;
                  }}
                >
                  Undo
                </Button>
              }
            />
          );
        }}
      >
        Show toast
      </Button>
      <Button
        variant="quiet"
        onClick={() => {
          toast.value = null;
        }}
      >
        Dismiss toast
      </Button>
      {toast}
    </Stack>
  );
}

Installation

bun add meowtail

Usage

Taken from the examples on this page.

usage.tsxtsx

import { Toast } from "meowtail";

<Toast
  message="Saved the local sample."
  actions={
    <Button
      variant="quiet"
      onClick={() => {
        toast.value = null;
      }}
    >
      Undo
    </Button>
  }
/>

API reference

Host owns visibility, lifetime and placement; mounting does not schedule timers.

Props

Prop	Type	Default
`message`Required	`Child`	–
`icon`	`Child`	–
`actions`	`Child`	–
`role`	`"status" \| "alert"`	`"status"`

Also takes className, children and the attributes and events of its root element.

DOM parts

rooticonmessageactions

Registry

The component is registered as toast in the meowtail component registry.