Alert

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add alert

Usage#

import {
  Alert,
  AlertIcon,
  AlertContent,
  AlertTitle,
  AlertDescription,
  AlertActions,
} from "@/components/ui/alert"

export function Example() {
  return (
    <Alert variant="info">
      <AlertIcon />
      <AlertContent>
        <AlertTitle>Heads up</AlertTitle>
        <AlertDescription>This action cannot be undone.</AlertDescription>
      </AlertContent>
    </Alert>
  )
}

Variants#

Five semantic variants. Each keeps a neutral surface (border-border on bg-background) and only recolors the leading icon from a single semantic token (--success, --warning, etc.), so the status reads at a glance and re-themes across all four Koala themes automatically.

Sizes#

With icon#

AlertIcon auto-selects the matching Phosphor icon for the current variant when no children are given. Pass children to use a custom icon instead.

With actions#

Use AlertActions inside AlertContent to add a row of action buttons below the description.

Dismissible#

Pass onDismiss to render a close button. The component is uncontrolled - the consumer manages visibility. Use dismissLabel to provide a screen-reader accessible label (defaults to "Dismiss").

FAQ#