Alert v0.1.0 Feedback

Inline callout for contextual feedback; danger/warning announce assertively via role=alert.

import { Alert } from "latticeui-react";

Examples

Types

Heads up

A new version is available.

Deploy complete

All checks passed.

Approaching quota

You've used 90% of your plan.

Payment failed

Update your billing details.

Show code

<Alert type="info" title="Heads up" description="A new version is available." />
<Alert type="success" title="Deploy complete" description="All checks passed." />
<Alert type="warning" title="Approaching quota" description="You've used 90% of your plan." />
<Alert type="danger" title="Payment failed" description="Update your billing details." />

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`div`	`[data-scope="alert"][data-part="root"]`
`icon`	`span`	`[data-scope="alert"][data-part="icon"]`
`title`	`div`	`[data-scope="alert"][data-part="title"]`
`description`	`div`	`[data-scope="alert"][data-part="description"]`

Props

Prop	Type	Default	Description
`type`	`"info" \| "success" \| "warning" \| "danger"`	`"info"`
`title` *	`string`	—
`description`	`string`	—
`icon`	`ReactNode`	—	Replaces the default per-type glyph.

Accessibility

Roles: status (info/success)alert (warning/danger)

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="alert"][data-part="root"] {
  /* your overrides */
}

Component tokens: --alert-accent--alert-bg--alert-fg

State attributes: data-type