Alert
Contextual feedback messages for user actions or system events. Four visual variants (solid, soft, outline, ghost), five intents, three sizes, six rounded options, optional close button, actions, and RTL support.
Playground
Installation
pnpm add @tessinaui/uiUsage
import { Alert } from "@tessinaui/ui";
<Alert
intent="error"
title="Something went wrong"
description="There was an issue processing your request. Please try again."
onClose={() => {}}
/>Examples
Default
A basic alert with a title and supporting description.
Intents
Five semantic intents — none, error, warning, success, and info — each with its own colour and icon.
Variants
Four visual fill styles — solid, soft, outline, and ghost.
Sizes
Three sizes — sm, md, and lg — control text size and padding.
With Actions
Add a primary CTA, a secondary CTA, or a dismiss button.
Loading
Use AlertSkeleton as a placeholder while content loads.
Variants
| Variant | Description |
|---|---|
solid | Filled background using the full intent colour — bg-error, bg-warning, etc. High emphasis. |
soft | Light tinted background (bg-error-light) with semantic icon colour. Default. |
outline | Coloured border + very subtle tint. No background fill on the text area. |
ghost | No background or border. Icon still carries the semantic colour. Minimal emphasis. |
Intents
| Intent | Icon | Use case |
|---|---|---|
none | Info | Neutral informational message |
error | CircleX | Destructive action failed, validation error |
warning | TriangleAlert | Potentially harmful, requires attention |
success | CircleCheck | Action completed successfully |
info | Info | Non-critical information or guidance |
Props
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
intent | "none" | "error" | "warning" | "success" | "info" | "none" | Semantic colour and default icon |
variant | "solid" | "soft" | "outline" | "ghost" | "soft" | Visual fill style |
size | "sm" | "md" | "lg" | "md" | Text size and padding |
rounded | "none" | "sm" | "md" | "lg" | "xl" | "full" | "md" | Border radius |
width | "narrow" | "default" | "wide" | "default" | Max-width constraint — narrow (sm), default (full), wide (4xl) |
title | ReactNode | — | Bold heading text |
description | ReactNode | — | Supporting body text |
icon | ReactNode | Intent default | Custom leading icon |
showIcon | boolean | true | Show or hide the leading icon |
onClose | () => void | — | Renders a dismiss (×) button when provided |
action | AlertAction | — | Primary CTA on the trailing edge |
secondaryAction | AlertAction | — | Secondary CTA beside the primary |
shadow | boolean | false | Drop shadow — use for callout / floating card style |
dir | "ltr" | "rtl" | "ltr" | Text direction |
role | string | "alert" | ARIA live-region role. Use "status" for non-urgent messages |
className | string | — | Extra classes on the root element |
AlertAction
| Field | Type | Description |
|---|---|---|
label | string | Button text |
onClick | () => void | Click handler |
variant | ButtonProps["variant"] | Override button fill style |
intent | ButtonProps["intent"] | Override button intent colour |
rounded | ButtonProps["rounded"] | Override button radius. Default: "full" |
disabled | boolean | Disabled state |
loading | boolean | Loading spinner state |
leadingIcon | ReactNode | Icon before label |
trailingIcon | ReactNode | Icon after label |
Accessibility
- Root element carries
role="alert"by default — an assertive ARIA live region. Setrole="status"for non-urgent (polite) announcements. - The leading icon uses
aria-hidden="true"— it is decorative; the title and/or description provide the text. - The close button has an accessible
aria-label="Dismiss". - All interactive elements (action buttons, close) meet the WCAG AA 44×44 px minimum touch target via Tessina's Button/IconButton components.
- Focus ring:
focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2.
Action Sheet
A mobile-first bottom sheet presenting a set of contextual actions. Built on Base UI Dialog. Compound component pattern with Header, Group, Item, Separator, and Cancel. Three sizes. Five corner-rounding options. Destructive intent, loading state, icon slots. LTR and RTL support.
AlertDialog
Blocking confirmation dialog for destructive or critical actions. Built on Base UI's alert-dialog primitive with role="alertdialog", focus trap, and explicit-action-only dismissal — the user must choose Confirm or Cancel.