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

Props table is being written. See the package README for the complete API surface.

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

Need more?View on npm →
Was this page helpful?