Skip to content
uiify

Framework

Next.jsTanStack StartAstroVike

Style

CSSTailwind

Theme

Language

English简体中文日本語العربيةРусскийEspañolPortuguês (Brasil)

Alert

Static message container for persistent inline feedback.

Browsers
Chrome 123+Firefox 121+Safari 17.5+
Tier
0
Bundle compressed
387 B
Forced layout budget
0 ms
Axe budget
0
SSR compatible
Yes
Published contract
Test harness

Playground

Alert

Warning: browser support is incomplete.
Check the support matrix before release.

Examples

Outcome messages

The variant provides the status symbol and accent; keep the meaning clear in the title and description.

Payment successful
Your payment has been processed successfully.
Upload failed
Check your connection and try again.
Action needs review
Check the support matrix before release.
Update available
Review the latest changes in this release.
import { Alert, AlertDescription, AlertTitle } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Alert variant="success">
        <AlertTitle>Payment successful</AlertTitle>
        <AlertDescription>Your payment has been processed successfully.</AlertDescription>
      </Alert>
      <Alert variant="destructive">
        <AlertTitle>Upload failed</AlertTitle>
        <AlertDescription>Check your connection and try again.</AlertDescription>
      </Alert>
      <Alert variant="warning">
        <AlertTitle>Action needs review</AlertTitle>
        <AlertDescription>Check the support matrix before release.</AlertDescription>
      </Alert>
      <Alert variant="secondary">
        <AlertTitle>Update available</AlertTitle>
        <AlertDescription>Review the latest changes in this release.</AlertDescription>
      </Alert>
    </>
  );
}

API

Alert

PropTypeDefaultDescription
childrenReactNode—AlertTitle, AlertDescription, or custom message content.
variant"secondary" | "success" | "warning" | "destructive""secondary"Visual meaning written to data-variant; keep severity understandable in text.
symbolstring | falseⓘ / ✓ / ⚠︎ / ×Override the decorative text symbol, or pass false to hide it. The default comes from variant.
asElementType"div"Native element or component used for the root.
role"status" | "alert"—Choose a live role only when message timing and urgency warrant announcement.
classNamestring—Class applied to the root element.
styleCSSProperties—Native root styles.
refRef<HTMLElement>—Ref forwarded to the rendered root element.
render(props, state) => ReactElement | null—Replace the rendered element while keeping behavior and accessibility wiring.

AlertTitle

PropTypeDefaultDescription
childrenReactNode—Content rendered by this alert part.
asElementType"div"Native element or component used for the root.
className / style / ref / native propsnative div props—Native element props, styles, events, and ref are forwarded.
render(props, state) => ReactElement | null—Replace the rendered element while keeping behavior and accessibility wiring.

AlertDescription

PropTypeDefaultDescription
childrenReactNode—Content rendered by this alert part.
asElementType"div"Native element or component used for the root.
className / style / ref / native propsnative div props—Native element props, styles, events, and ref are forwarded.
render(props, state) => ReactElement | null—Replace the rendered element while keeping behavior and accessibility wiring.

Keyboard

KeyAction

Accessibility

Persistent inline message with no live role by default. Add role=status or role=alert only when a dynamic update's timing and urgency warrant announcement.

Styling hooks

data-uiify-alertdata-uiify-alert-titledata-uiify-alert-descriptiondata-part="symbol|title|description"data-variant