Toast

Interactive

See Toast in Storybook for every variant, with live controls.

A transient notification. For a message tied to a region of the page, use Alert instead.

import { Toast } from "@kairosis/eidos";

<Toast
  tone="danger"
  title="Run failed"
  description="api-gateway · triggered by push"
  onDismiss={dismiss}
/>;

Props

Prop	Type	Default	Description
tone	"neutral" | "success" | "warning" | "danger"	"neutral"	Picks the colour and the icon
title	ReactNode	—	Required
description	ReactNode	—
action	ReactNode	—	Slot below the description
onDismiss	() => void	—	Renders a dismiss button

Guidelines

• This is one toast row, not a toast system. There's no provider or queue: render a fixed bottom-right column of these and manage the list yourself.
• Carries role="status", so it's announced politely without stealing focus.
• The icon follows tone — you don't pass one.
• Toasts disappear. Never put the only copy of something important, or the only way to recover, in one — that's what Alert is for.