Alert

Inline alerts. Free, MIT · Overlays and notifications › Messages and status

Inline message. Warning and danger are announced immediately (role="alert"), others politely.

Installation

npx valyro-cli@latest add alert

npx shadcn@latest add https://valyro.xyz/r/alert.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Alert } from 'valyro-ui';

Prop	Type	Default
`variant`	`'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral'`	`'info'`	Status color and default icon; `warning` and `danger` are announced immediately (`role="alert"`).
`title`	`ReactNode`		Bold first line of the message.
`description`	`ReactNode`		Body text under the title, or the whole message when there is no title.
`icon`	`ReactNode`		Replaces the variant's default icon; `null` hides it.
`action`	`ReactNode`		Buttons or links shown at the end of the alert.
`onDismiss`	`() => void`		Shows a close button that calls this.
`dismissLabel`	`string`	`'Dismiss'`	Accessible name of the close button.

Alert.Title (AlertTitle), Alert.Description (AlertDescription), Alert.Action (AlertAction)