Thrive Design System

Components

Alert

A contextual feedback message that communicates status, warnings, errors, or informational content to users.

Installation

npm install @thrivecart/ui
yarn add @thrivecart/ui
pnpm add @thrivecart/ui
bun add @thrivecart/ui

Usage

import { Alert, AlertIcon, AlertContent, AlertTitle, AlertDescription, AlertAction } from '@thrivecart/ui';

Examples

Default Alert

Default

Standard informational alert

<Alert>
<AlertContent>
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
</AlertContent>
</Alert>

Variants

Alert Variants

Different variants for different severity levels

<div className="flex flex-col gap-3">
<Alert variant="default">
  <AlertContent>
    <AlertTitle>Default</AlertTitle>
    <AlertDescription>A neutral informational message.</AlertDescription>
  </AlertContent>
</Alert>
<Alert variant="info">
  <AlertIcon><MdInfoOutline /></AlertIcon>
  <AlertContent>
    <AlertTitle>Info</AlertTitle>
    <AlertDescription>Your trial expires in 7 days.</AlertDescription>
  </AlertContent>
</Alert>
<Alert variant="success">
  <AlertIcon><MdCheckCircleOutline /></AlertIcon>
  <AlertContent>
    <AlertTitle>Success</AlertTitle>
    <AlertDescription>Your campaign has been published.</AlertDescription>
  </AlertContent>
</Alert>
<Alert variant="warning">
  <AlertIcon><MdWarningAmber /></AlertIcon>
  <AlertContent>
    <AlertTitle>Warning</AlertTitle>
    <AlertDescription>This action will affect 1,200 contacts.</AlertDescription>
  </AlertContent>
</Alert>
<Alert variant="destructive">
  <AlertIcon><MdErrorOutline /></AlertIcon>
  <AlertContent>
    <AlertTitle>Error</AlertTitle>
    <AlertDescription>Failed to save changes. Please try again.</AlertDescription>
  </AlertContent>
</Alert>
</div>

With Action

Alert with Action

Alert with an action button

<Alert>
<AlertIcon><MdDarkMode /></AlertIcon>
<AlertContent>
  <AlertTitle>Dark mode is now available</AlertTitle>
  <AlertDescription>Enable it under your profile settings to get started.</AlertDescription>
  <AlertAction>
    <Button size="xs" variant="secondary">Enable</Button>
  </AlertAction>
</AlertContent>
</Alert>

Multiple Actions

Alert with multiple action buttons

<Alert variant="warning" closable>
<AlertIcon><MdUpdate /></AlertIcon>
<AlertContent>
  <AlertTitle>New version available</AlertTitle>
  <AlertDescription>Version 3.2 is ready to install. Review the changelog before updating.</AlertDescription>
  <AlertAction>
    <Button size="xs" variant="secondary">Update now</Button>
    <Button size="xs" variant="ghost">Later</Button>
  </AlertAction>
</AlertContent>
</Alert>

Custom Icons

Use any Material Design icon (or any SVG) inside AlertIcon.

Custom Icons

Alerts with your own icons

<div className="flex flex-col gap-3">
<Alert variant="info">
  <AlertIcon className="text-ink-info"><MdRocketLaunch /></AlertIcon>
  <AlertContent>
    <AlertTitle>New feature launched</AlertTitle>
    <AlertDescription>A/B testing is now available for all Pro plans.</AlertDescription>
  </AlertContent>
</Alert>
<Alert variant="success">
  <AlertIcon className="text-success-solid"><MdBackup /></AlertIcon>
  <AlertContent>
    <AlertTitle>Backup complete</AlertTitle>
    <AlertDescription>All your data has been backed up successfully.</AlertDescription>
  </AlertContent>
</Alert>
<Alert variant="warning">
  <AlertIcon className="text-ink-orange"><MdCreditCard /></AlertIcon>
  <AlertContent>
    <AlertTitle>Payment method expiring</AlertTitle>
    <AlertDescription>Your Visa ending in 4242 expires next month.</AlertDescription>
    <AlertAction>
      <Button size="xs" variant="secondary">Update card</Button>
      <Button size="xs" variant="ghost">Dismiss</Button>
    </AlertAction>
  </AlertContent>
</Alert>
<Alert variant="destructive">
  <AlertIcon className="text-destructive-solid"><MdSecurity /></AlertIcon>
  <AlertContent>
    <AlertTitle>Security alert</AlertTitle>
    <AlertDescription>Unusual login detected from a new device.</AlertDescription>
  </AlertContent>
</Alert>
</div>

Description Only

Description Only

Alert without a title for simpler messages

<Alert variant="info">
<AlertIcon><MdInfoOutline /></AlertIcon>
<AlertContent>
  <AlertDescription>Your settings have been updated.</AlertDescription>
</AlertContent>
</Alert>

Closable

Closable Alert

Alert with a close button

<Alert variant="warning" closable>
<AlertIcon><MdWarningAmber /></AlertIcon>
<AlertContent>
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>This action will affect 1,200 contacts.</AlertDescription>
</AlertContent>
</Alert>

Best Practices

✓

Use appropriate variants

Match the alert variant to the severity: info for neutral information, success for confirmations, warning for caution, destructive for errors.

✓

Keep messages concise

Write clear, actionable alert messages. Include what happened and what the user should do next.

✗

Don't overuse alerts

Too many alerts on a page create noise. Reserve alerts for genuinely important information.

✗

Don't use for transient messages

Use Toast for temporary feedback. Alerts should persist and be relevant to the current view.

Props

Alert

PropTypeDefaultDescription
variant'default' | 'info' | 'success' | 'warning' | 'destructive''default'Alert style variant
closablebooleanfalseShow a close button
onClose() => void-Callback when close button is clicked
classNamestring-Additional className

AlertIcon

PropTypeDefaultDescription
childrenReactNode-Icon element (auto-sized to 32px)
classNamestring-Additional className (use for icon color, e.g. text-ink-info)

AlertContent

PropTypeDefaultDescription
childrenReactNode-AlertTitle, AlertDescription, AlertAction
classNamestring-Additional className

AlertTitle

PropTypeDefaultDescription
childrenReactNode-Title text
classNamestring-Additional className

AlertDescription

PropTypeDefaultDescription
childrenReactNode-Description text
classNamestring-Additional className

AlertAction

PropTypeDefaultDescription
childrenReactNode-Action buttons or links
classNamestring-Additional className

Accessibility

ARIA Roles

Alerts use the alert role by default, which causes screen readers to announce the content immediately. Use role="status" for non-urgent updates.

  • Alerts are announced by screen readers when they appear in the DOM.
  • Use descriptive text that makes sense without visual context.
  • Ensure sufficient color contrast between alert variants and their text.
  • Don't rely solely on color to convey meaning; always include text.