ComponentsFeedback Blocks
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={() => {}}
/>Showcase
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.
Calendar
Date picker calendar built on react-day-picker v9. Supports single, range, and multiple selection modes, RTL, week numbers, disabled dates, multi-month view, and an optional footer slot.
Banner
Promotional / informational surface for marketing, onboarding, upsell, and announcements. Three layouts (inline, centered, landscape with edge-to-edge image), four variants, six intents, prefix/suffix slots, primary + secondary actions, inline arrow link, optional footer row, dismissible, LTR/RTL.