Skip to content
Sisyphos UI

Alert

Inline message with semantic colors, title, description, and dismiss action.

Data Display·Available inReactVueAngular·View as Markdown

Preview

tsx
Heads up
Scheduled maintenance starts in 1 hour.
Saved
Your changes have been published.
Almost full
Your workspace is at 92% of its plan limit.

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Playground

Flip props to see how the component responds. The snippet below updates as you change options.

Heads up
Scheduled maintenance starts in 1 hour.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework
import { Alert } from "@sisyphos-ui/react";

export const Saved = () => (
  <Alert color="success" title="All set" description="Your settings have been saved." />
);

Variants

tsx
Contained
Solid fill with contrasting text.
Outlined
Transparent background with a colored border.
Soft
Subtle tinted background.

Real world — deployment banner

Alert inside a Card header, used to surface status over content.

tsx
Deployment succeeded
Your changes are live at https://app.example.com.

Next build will inherit this configuration. Review the diff to confirm the rollout window.

API

PropTypeDefaultDescription
variant"contained" | "outlined" | "soft""soft"Visual treatment.
color"primary" | "success" | "error" | "warning" | "info""info"Semantic color; also selects the default icon and the inferred ARIA role.
titleReactNode—Alert heading.
descriptionReactNode—Supporting copy rendered below the title.
iconReactNode | null—Override the default semantic icon; pass `null` to hide it.
actionsReactNode—Action slot (typically a `Button`).
onClose(event?: MouseEvent) => void—When provided, renders the close button; also fires when `autoCloseDuration` elapses.
closeAriaLabelstring"Close"Accessible label for the close button.
autoCloseDurationnumber—Auto-dismiss after this many ms; requires `onClose` to actually unmount the alert.
rolestring—Override the inferred live-region role.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

Adheres to the Alert WAI-ARIA design pattern.

  • The live-region role is inferred from color: role="alert" (assertive) when color="error", role="status" (polite) otherwise — overridable via the role prop.
  • The close button is a native <button> labeled through closeAriaLabel (defaults to "Close").
  • Default semantic icons are decorative SVGs marked aria-hidden="true" — the message text carries the meaning.
Need more?View on npm →
Was this page helpful?