Alert

molecule

Full-width contextual message for info, success, warning, and error states. Supports an optional title and a dismissible variant.

"Add an Alert from lucent-ui with variant="warning" and a dismissible button. Show it conditionally based on a boolean state."

Usage

React / JSX

import { Alert } from 'lucent-ui'

<Alert title="Alert" title="Heads up">
  This is an alert message with additional details.
</Alert>

pnpm add lucent-ui

Alert props — * required

Prop	Type	Default	Description
`variant`*	`"info" \| "success" \| "warning" \| "danger"`	—	Semantic colour variant.
`title`	`string`	—	Bold heading above the message body.
`onDismiss`	`() => void`	—	If provided, renders a close button.
`children`*	`React.ReactNode`	—	Alert message body.