Alert

Alerts display important messages that require user attention. Use them for status updates, warnings, errors, or success confirmations.

Interactive preview

Adjust props to see how the Alert responds.

Variant

Title (optional)

Message

Show dismiss button

Heads up

This is an alert message.

Props

Prop	Type	Default	Description
variant	"info" \| "success" \| "warning" \| "error"	"info"	Visual style indicating the alert type.
title	string	—	Optional bold heading above the alert content.
children	ReactNode	—	Alert body content.
onDismiss	() => void	—	If provided, shows a close button that calls this handler.
className	string	""	Additional Tailwind classes merged with Alert styles.
...props	HTMLAttributes<HTMLDivElement>	—	Standard div attributes (id, aria-*, etc.).

Installation

Install packages

pnpm add @akanaka-design/components @akanaka-design/tokens

Styles (app root)

import "@akanaka-design/tokens/css";
import "@akanaka-design/components/styles.css";

Usage

Basic usage

import { Alert } from "@akanaka-design/components";

export function Example() {
  return (
    <Alert variant="info">
      Your session will expire in 5 minutes.
    </Alert>
  );
}

With title

<Alert variant="success" title="Payment received">
  Your invoice #1234 has been paid successfully.
</Alert>

Dismissible

const [visible, setVisible] = useState(true);

{visible && (
  <Alert 
    variant="warning" 
    title="Unsaved changes"
    onDismiss={() => setVisible(false)}
  >
    You have unsaved changes that will be lost.
  </Alert>
)}

All variants

<Alert variant="info">Info message</Alert>
<Alert variant="success">Success message</Alert>
<Alert variant="warning">Warning message</Alert>
<Alert variant="error">Error message</Alert>

Guidelines

When to use

System status messages (errors, warnings, confirmations)
Important information that shouldn't be missed
Contextual feedback after user actions

When not to use

Toast notifications that auto-dismiss — use a toast component
Inline validation errors — use error text below the field
Promotional content — use a banner or card

Content

Keep messages concise and actionable
Use the title for the main point, body for details
Match variant to severity: error for failures, warning for caution, success for confirmations, info for neutral updates