Alert

Interactive

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

An inline message bound to a region of the page. For something transient and global, use Toast.

import { Alert, Button } from "@kairosis/eidos";

<Alert
  tone="danger"
  title="Source disconnected"
  action={
    <Button variant="secondary" size="sm">
      Reconnect
    </Button>
  }
  onDismiss={dismiss}
>
  Reconnect the source to resume scheduled runs.
</Alert>;

Props

Prop	Type	Default	Description
tone	"info" | "success" | "warning" | "danger"	"info"	Picks the colour and the icon
title	ReactNode	—
children	ReactNode	—	Body copy
action	ReactNode	—	Slot below the body — usually a small secondary Button
onDismiss	() => void	—	Renders a dismiss button when provided

Guidelines

• The icon is chosen by tone — you don't pass one.
• Carries role="alert", so screen readers announce it when it appears. Don't render one on every page load for static information; that's just text.
• Say what to do next, not only what went wrong. The action slot exists for exactly that.
• Only info derives its background from the tone colour; the semantic tones use their hand-tuned --*-subtle backgrounds.