Westy Design Systemv0.2.7
OverviewComponentsExamplesStorybook

Foundations

  • Typography
  • Colors
  • Spacing
  • Radius
  • Shadows
  • Icons

Components

  • Accordion
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Calendar
  • Card
  • Carousel
  • Chart
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • Context Menu
  • Data Table
  • Date Picker
  • Dialog
  • Direction
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Hover Card
  • Input
  • Input Group
  • Input OTP
  • Item
  • Kbd
  • Label
  • Menubar
  • Native Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Questionnaire
  • Radio Group
  • Resizable
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spinner
  • Switch
  • Table
  • Tabs
  • Textarea
  • Toggle
  • Toggle Group
  • Tooltip

Chat

  • Attachment
  • Bubble
  • Marker
  • Message
  • Message Scroller

Components

Alert

Displays a callout for user attention.

Playground

Success! Your changes have been saved.
This is an alert with icon, title and description.
—variant
—svg
—AlertDescription
—AlertAction
Usage
Compose Alert with AlertTitle and AlertDescription. Drop an svg as the first child and the grid places it beside the text automatically — the container carries role="alert" for assistive technology.
Success! Your changes have been saved.
This is an alert with icon, title and description.
import {
  Alert,
  AlertDescription,
  AlertTitle,
} from "@workspace/ui/components/alert"
import { CheckCircleIcon } from "@phosphor-icons/react"

<Alert>
  <CheckCircleIcon />
  <AlertTitle>Success! Your changes have been saved.</AlertTitle>
  <AlertDescription>
    This is an alert with icon, title and description.
  </AlertDescription>
</Alert>
Title only
Every part is optional — a bare AlertTitle makes a compact one-liner, with or without the icon.
This alert has a title and an icon. No description.
This alert has a title and nothing else.
<Alert>
  <InfoIcon />
  <AlertTitle>
    This alert has a title and an icon. No description.
  </AlertTitle>
</Alert>

<Alert>
  <AlertTitle>This alert has a title and nothing else.</AlertTitle>
</Alert>
Destructive
variant="destructive" tints the icon and title with --destructive and softens the description to 90% opacity — the surface stays on bg-card so the message reads without shouting.
Unable to process your payment.

Please verify your billing information and try again.

  • Check your card details
  • Ensure sufficient funds
  • Verify billing address
import { WarningCircleIcon } from "@phosphor-icons/react"

<Alert variant="destructive">
  <WarningCircleIcon />
  <AlertTitle>Unable to process your payment.</AlertTitle>
  <AlertDescription>
    <p>Please verify your billing information and try again.</p>
    <ul className="list-inside list-disc">
      <li>Check your card details</li>
      <li>Ensure sufficient funds</li>
      <li>Verify billing address</li>
    </ul>
  </AlertDescription>
</Alert>
With action
AlertAction pins its content to the top end corner and the alert reserves space for it automatically — use it for a dismiss button or a short follow-up action.
Your message has been sent.
Recipients should receive it within a few minutes.
import { AlertAction } from "@workspace/ui/components/alert"
import { Button } from "@workspace/ui/components/button"

<Alert>
  <CheckCircleIcon />
  <AlertTitle>Your message has been sent.</AlertTitle>
  <AlertDescription>
    Recipients should receive it within a few minutes.
  </AlertDescription>
  <AlertAction>
    <Button variant="outline" size="sm">
      Undo
    </Button>
  </AlertAction>
</Alert>
Custom colors
For callouts beyond the two variants, override the surface with classes from the Westy raw scales — pair a light background with a dark text step, tint the description through the data-slot selector and give everything its dark: counterpart.
Gift card applied
Your balance covers the full order — nothing to pay today.
Scheduled maintenance
The dashboard will be read-only on Saturday from 02:00 to 04:00.
import { GiftIcon } from "@phosphor-icons/react"

<Alert className="border-green-200 bg-green-100 text-green-700 *:data-[slot=alert-description]:text-green-700/90 dark:border-green-900 dark:bg-green-950 dark:text-green-300 dark:*:data-[slot=alert-description]:text-green-300/90">
  <GiftIcon />
  <AlertTitle>Gift card applied</AlertTitle>
  <AlertDescription>
    Your balance covers the full order — nothing to pay today.
  </AlertDescription>
</Alert>

<Alert className="border-orange-200 bg-orange-100 text-orange-700 *:data-[slot=alert-description]:text-orange-700/90 dark:border-orange-900 dark:bg-orange-950 dark:text-orange-300 dark:*:data-[slot=alert-description]:text-orange-300/90">
  <WarningCircleIcon />
  <AlertTitle>Scheduled maintenance</AlertTitle>
  <AlertDescription>
    The dashboard will be read-only on Saturday from 02:00 to 04:00.
  </AlertDescription>
</Alert>
RTL
Set dir="rtl" on a wrapper or inherit it from a Direction provider — the layout uses logical properties throughout, so the icon column, text alignment and the AlertAction corner all flip automatically.
تم حفظ التغييرات بنجاح.
هذا تنبيه مع أيقونة وعنوان ووصف.
<div dir="rtl">
  <Alert>
    <CheckCircleIcon />
    <AlertTitle>تم حفظ التغييرات بنجاح.</AlertTitle>
    <AlertDescription>هذا تنبيه مع أيقونة وعنوان ووصف.</AlertDescription>
    <AlertAction>
      <Button variant="outline" size="sm">
        تراجع
      </Button>
    </AlertAction>
  </Alert>
</div>
API Reference
Every part renders a plain div and accepts all div props — only Alert adds a prop of its own, plus role="alert" so screen readers announce it.
PropTypeDefault
Alert variant"default" | "destructive""default"
className (all parts)string—

Tokens used

9 design tokens consumed by the Alert component.

  • --card

    Card

    bg-card

  • --card-foreground

    Card Foreground

    text-card-foreground

  • --destructive

    Destructive

    text-destructive*:data-[slot=alert-description]:text-destructive/90

  • --muted-foreground

    Muted Foreground

    text-muted-foreground

  • --foreground

    Foreground

    [&_a]:hover:text-foreground

  • --border

    Border

    border

  • --radius-lg

    Radius 1× (10px)

    rounded-lg

  • --text-sm

    Text Small (14px)

    text-sm

  • --spacing

    Spacing unit (4px)

    px-4py-3gap-0.5gap-x-2.5pe-18size-4top-2.5end-3