Alert

A persistent in-flow status message, not a toast - reach for it when the notice should stay until it's dismissed.

info and success announce politely; warning and danger announce assertively.

Install Alert

1. New project? One command installs the package and wires everything - see Installation:

bash
pnpm dlx zyncat-ui init

2. Import the component - it loads its own stylesheet:

tsx
import { Alert } from '@zyncat/ui/alert';

Usage

tsx
import { Alert } from '@zyncat/ui/alert';
 
<Alert tone="warning" title="Subscription renewal" action={{ label: 'Manage plan', onClick: handlePlan }}>
  Your workspace trial will expire in 3 days.
</Alert>

Compose Alert in your application. No Tailwind or external styling library is required; every value resolves from Zyncat UI's token vocabulary.

Alert props

Alert

PropTypeDefaultDescription
...htmlAttributesHTMLAttributes—Standard <div> attributes (aria-*, data-*, ...) forwarded to the alert.
toneAlertTone—Status of the message; info/success are polite, warning/danger assertive. Default 'info'.
title*ReactNode—The message - sentence case, ideally one line.
childrenReactNode—Optional description; stays neutral - tone marks the message, not the prose.
actionAlertAction—One action max, rendered as the system secondary small button.
dismissibleboolean—Renders the always-visible close button. Uncontrolled unless `open` is given.
onDismiss() => void—Fires on dismiss. With `open` set, the parent owns hiding the alert.
openboolean—Controlled visibility; omit for uncontrolled. The exit fades and scales down, then releases the slot.
bannerboolean—App-level strip: square corners, hairline below only. Paint modifier.
iconReactNode | null—Override the tone glyph; pass null to render no glyph.
classNamestring—Extra class(es) merged onto the alert.
styleCSSProperties—Inline styles merged onto the alert.
animationDisableableAnimationentrance height 'slow'/'entrance' + opacity 'base'/'entrance'; exit scale + opacity 'fast'/'exit'Enter/exit timing - motion tokens only, or `null` to disable (enter and exit snap).

AlertAction

PropTypeDefaultDescription
label*string—Sentence-case label, e.g. "Update billing".
onClick() => void—

Frequently asked questions

Four: info, success, warning and danger. info and success render role="status", a polite live-region announcement; warning and danger render role="alert", which is assertive, matching the tones meant to interrupt.

Set dismissible for the always-visible close button - it's uncontrolled unless you also pass open - and give action a { label, onClick } for one action max, rendered as a small button tinted to the alert's own tone rather than Button's secondary variant.

It opens by easing its own height from 0 while fading in, and on dismiss it scales down and fades rather than collapsing - the space it occupied stays reserved until the exit finishes, so content below shifts up once, not mid-animation.

Yes - icon accepts any node to override the default tone glyph (info, check-circle, warning or warning-circle), and passing icon={null} removes the icon slot entirely.

Set in Geist & Newsreader — animated by the house engineZyncat UI · Rev 0.11 · MIT · Built by Tabsir Ahammed · Source on GitHub