Alert

Calls attention to contextual information. 1px frame and icon; critical variant fills with ink.

Preview

Heads up

Your workspace syncs every hour.

In action

Hold

Press paused

Ink density drifted on the 184. Recheck the sheet.

Plate locked

Issue 03 is on the cylinder. No more changes.

When to use

Use it for

A persistent message that belongs to the page: a warning, a limit, a state.
variant="solid" for the one critical message in view.

Not for

Transient confirmations; use toast.
Notes in running copy; use Callout.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Alert } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/alert.

2. Vendor the source

npx @noorddev/vlak-cli add alert

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/alert.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Alert } from "@noorddev/vlak-react";

<Alert title="Heads up">Your workspace syncs every hour.</Alert>
<Alert variant="solid" title="Payment failed" live="assertive">Update your card to keep publishing.</Alert>

Props

Alert

Prop	Type	Default	Description
`title`	`ReactNode`
`variant`	`"outline" \| "solid"`	`"outline"`	Solid ink variant.
`icon`	`ReactNode`
`live`	`"polite" \| "assertive"`		Static content is a note. Set "polite" (role=status) or "assertive" (role=alert) only when the alert appears in response to something.

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "title">.

Accessibility

Static content renders role="note". Pass live="polite" (role="status") or live="assertive" (role="alert") only when the alert appears in response to something.
The default icon is decorative; icon accepts your own node.

Markup

<div class="rs-alert" role="status"><div><span class="rs-alert-title">Heads up</span><p class="rs-alert-body">Your workspace syncs every hour.</p></div></div>

Classes

.rs-alert.rs-alert-title.rs-alert-body.rs-alert-solid.rs-alert-body-solid.rs-alert-icon.rs-alert-icon-solid.rs-alert-title-solid