Alert
Inline message with semantic colors, title, description, and dismiss action.
Preview
example.tsxtsx
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.
Something went wrong
The upload was aborted.
Installation
Install the individual package:
snippet.bashbash
pnpm add @sisyphos-ui/alert @sisyphos-ui/coreOr use the umbrella package that bundles everything:
snippet.bashbash
pnpm add @sisyphos-ui/uiUsage
Import the component styles and the component itself:
snippet.tsxtsx
import "@sisyphos-ui/alert/styles.css";
import { Alert } from "@sisyphos-ui/alert";Variants
example.tsxtsx
Contained
Solid fill with contrasting text.
Outlined
Transparent background with a colored border.
Soft
Subtle tinted background.
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.