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.

Installation

pnpm add @tessinaui/ui

Usage

import { Alert } from "@tessinaui/ui";

<Alert
  intent="error"
  title="Something went wrong"
  description="There was an issue processing your request. Please try again."
  onClose={() => {}}
/>

Playground

Preview

Showcase

Preview

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. Set role="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 Tessera's Button/IconButton components.
Focus ring: focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2.

Alert

On this page