chrome

<tc-toast>

Auto-dismissing notification with four variants. Inline rendering — positioning is the page's job.

import "@ra9/tan-compose-kit/toast"

Props

Name	Type	Default	Description
`open`	`boolean`	`false`	Whether the toast is visible. Reflects to the host. Set to `true` to show.
`variant`	`"info" \| "success" \| "warning" \| "error"`	`"info"`	Visual style and icon.
`message`	`string`	`""`	The message text. Falls back to slotted content if empty.
`duration`	`number`	`4000`	Auto-dismiss in milliseconds. Set to `0` to disable auto-dismiss.
`dismissible`	`boolean`	`true`	Show a close button.

Events

Event	Detail	When
`tc-toast-close`	`{ reason: "timeout" \| "button" \| "api" }`	Fires when the toast closes.

Slots

Slot	Description
`(default)`	Rich content. Used when `message` is empty.

CSS variables

Variable	Default	Description
`--tc-toast-info`	`var(--tc-color-info, #3a5b8c)`	Info variant background.
`--tc-toast-success`	`var(--tc-color-success, #207a5b)`	Success variant background.
`--tc-toast-warning`	`var(--tc-color-warning, #a87326)`	Warning variant background.
`--tc-toast-error`	`var(--tc-color-danger, #b3261e)`	Error variant background.
`--tc-toast-fg`	`var(--tc-color-surface, #ffffff)`	Foreground (text + icon) color.
`--tc-toast-radius`	`var(--tc-radius-lg, 10px)`	Corner radius.
`--tc-toast-shadow`	`var(--tc-shadow-lg, …)`	Drop shadow.
`--tc-toast-font`	`var(--tc-font-sans, …)`	Font family.

Examples

Variants

<tc-toast open variant="success" message="Changes saved."></tc-toast> <tc-toast open variant="error" message="Couldn't reach the server."></tc-toast>

Auto-dismiss

The default duration is 4 seconds. Set it to 0 to keep the toast open until the user closes it (or your code does).

<tc-toast open variant="info" duration="0" message="Sticky until dismissed."></tc-toast>

Slot content

When message is empty, the default slot is used instead — useful for embedding links or formatting.

<tc-toast open variant="success"> Saved. <a href="/posts/123">View post</a> </tc-toast>

Programmatic show/hide

Toasts position themselves wherever you put them in the DOM. A common pattern is a fixed container in the corner that you append toasts to.

<div id="toast-area" style="position:fixed; top:20px; right:20px; z-index:50;"></div> <script type="module"> function notify(variant, message) { const t = document.createElement("tc-toast"); t.variant = variant; t.message = message; t.open = true; t.addEventListener("tc-toast-close", () => t.remove()); document.getElementById("toast-area").appendChild(t); } notify("success", "Saved."); </script>

Theming

<tc-toast open variant="success" style="--tc-toast-radius: 999px;" message="Pill toast" ></tc-toast>

Accessibility

The toast has role="status" and aria-live="polite" so screen readers announce new content without interrupting.
The close button has an aria-label="Close".
Auto-dismiss can be a problem for users who need more time — set duration="0" for important messages, or extend it generously when the toast contains an action.
The icon is aria-hidden; the message text carries the meaning.

← All components