Feedback

Alert

A static, inline message. `danger` and `warning` get `role="alert"` so screen readers interrupt for them; `info` and `success` use `role="status"`, which waits for a pause instead of talking over the user.

Server safeSource

Import

import { Alert } from '@the_viveksingh/vivek-ui'

Tones

danger and warning use role="alert" so a screen reader interrupts; info and success use role="status", which waits for a pause rather than talking over the user.

Heads up

Deploys take about a minute.

Saved

Your changes are live.

Check this

Your trial ends tomorrow.

Payment failed

Try another card.

<Alert tone="info" title="Heads up">Deploys take about a minute.</Alert>
<Alert tone="success" title="Saved">Your changes are live.</Alert>
<Alert tone="warning" title="Check this">Your trial ends tomorrow.</Alert>
<Alert tone="danger" title="Payment failed">Try another card.</Alert>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Alert
Prop	Type	Default	Description
`tone`	`'info' \| 'success' \| 'warning' \| 'danger'`	—	—
`variant`	`'soft' \| 'outline' \| 'solid'`	—	—
`title`	`ReactNode`	—	Bold leading line.
`icon`	`ReactNode`	—	Leading glyph. Pass `null` to drop the default.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Alert carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.