Skip to main content

​
Overview

ℹ
Tip
You can invite up to 10 team members on the free plan.
✓
Payment successful
Receipt sent to your email.
⚠
Storage almost full
You have used 90% of your storage limit.
✕
Failed to save
There was an error saving your changes. Please try again.
Alert communicates important information to the user at the page or section level. It is non-dismissible by default and each variant automatically applies a matching icon, background, border, and text color.

​
Installation

npm install @araf-ds/core

​
Usage

import { Alert } from "@araf-ds/core"

export default function Example() {
  return (
    <Alert
      variant="success"
      title="Profile saved"
      description="Your changes have been saved successfully."
    />
  )
}

​
Variants

Alert has 6 semantic variants covering the full range of feedback contexts.

​
Default

🔔
New update available
A new version of the app is ready to install.
<Alert
  title="New update available"
  description="A new version of the app is ready to install."
/>

​
Info

ℹ
Tip
You can invite up to 10 team members on the free plan.
<Alert
  variant="info"
  title="Tip"
  description="You can invite up to 10 team members on the free plan."
/>

​
Success

✓
Payment successful
Your invoice has been sent to [email protected]
<Alert
  variant="success"
  title="Payment successful"
  description="Your invoice has been sent to [email protected]"
/>

​
Warning

⚠
Storage almost full
You have used 90% of your 5 GB storage limit.
<Alert
  variant="warning"
  title="Storage almost full"
  description="You have used 90% of your 5 GB storage limit."
/>

​
Error

✕
Failed to save
There was an error saving your changes. Please try again.
<Alert
  variant="error"
  title="Failed to save"
  description="There was an error saving your changes. Please try again."
/>

​
Destructive

⛔
Account will be deleted
This action cannot be undone. All data will be permanently removed.
<Alert
  variant="destructive"
  title="Account will be deleted"
  description="This action cannot be undone. All data will be permanently removed."
/>
Always pair a destructive Alert with a confirmation dialog before the user can trigger the action.

​
With Action

⚠
Your session is expiring
You will be logged out in 5 minutes.
<Alert
  variant="warning"
  title="Your session is expiring"
  description="You will be logged out in 5 minutes."
  action={
    <Button size="sm" variant="outline">Stay logged in</Button>
  }
/>

​
API Reference

​
variant
string
default:"default"
Semantic color variant. Values: default · info · success · warning · error · destructive
​
title
string
Bold heading text of the alert.
​
description
string
Supporting description text shown below the title.
​
icon
ReactNode
Custom leading icon. When omitted, a default icon is used per variant.
​
action
ReactNode
Optional action element (e.g. a Button) placed at the end of the alert.
​
className
string
Additional Tailwind classes for custom overrides.

​
Accessibility

  • Alert uses role="alert" so screen readers announce it when it appears in the DOM
  • Do not place multiple Alerts on the same page simultaneously — use one at a time
  • Icon alone does not convey the meaning — always pair with title or description
  • Action links inside alerts should have descriptive text, not just “Click here”

​
Do’s & Don’ts

Do

  • Use the correct semantic variant for the type of feedback
  • Place Alerts at the top of the relevant form or section
  • Use action prop for clear next steps (e.g. “Retry”, “Contact support”)
  • Keep descriptions concise — one sentence is ideal

Don't

  • Don’t stack multiple Alerts at once — prioritize the most important one
  • Don’t use Alert for transient feedback — use Toast instead
  • Don’t use the destructive variant for regular errors
  • Don’t use Alerts as decorative banners with no actionable meaning