Components

Alert

An inline message in the shape of a callout: tinted surface, tone icon, title and text, with an optional action and dismiss button.

Usage

Use it for:

  • Conditions about the page or a section: failed payment, sync paused, budget warnings.
  • Messages that stay until resolved.

Avoid it when:

  • Confirmation of an action people just took: use a toast.
  • Blocking decisions: use ConfirmDialog.
  • Field errors: use Field’s error.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Examples

Tones

Sync paused
Bank sync resumes when you reconnect.
New feature
You can now split transactions.
Payment sent
$1,450.00 to City Apartments.

Action and dismiss

Statement ready
Your October statement for Checking •• 2210 is available.

API Reference

Alert

A <div>; other <div> props are forwarded. Children are the message text.

PropTypeDefault
tone
"neutral""accent""success""warning""danger""info"
"info"
title
ReactNode
icon
IconName
action
ReactNode
onDismiss
() => void
dismissLabel
string
"Dismiss"
className
string

Accessibility

Keyboard:

  • Tab: reaches the action and the dismiss button.
  • Enter / Space: activates them.

ARIA and semantics:

  • Danger and warning alerts are role="alert" (announced right away); other tones are role="status" (polite).
  • Render an alert when the condition happens; one present at page load is read with the page, not announced.
  • The tone is carried by the icon and the title text, not by color alone.
  • The dismiss button is named (default "Dismiss").
© 2026 Motion. Internal documentation.