> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.
# Alert
> A prominent message bar for system feedback — supports 6 semantic variants with icon, title, description, and optional action.
## 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
```bash npm theme={null}
npm install @araf-ds/core
```
```bash yarn theme={null}
yarn add @araf-ds/core
```
```bash pnpm theme={null}
pnpm add @araf-ds/core
```
***
## Usage
```tsx theme={null}
import { Alert } from "@araf-ds/core"
export default function Example() {
return (
)
}
```
***
## 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.
```tsx theme={null}
```
### Info
ℹ
Tip
You can invite up to 10 team members on the free plan.
```tsx theme={null}
```
### Success
✓
Payment successful
Your invoice has been sent to [billing@company.com](mailto:billing@company.com)
```tsx theme={null}
```
### Warning
⚠
Storage almost full
You have used 90% of your 5 GB storage limit.
```tsx theme={null}
```
### Error
✕
Failed to save
There was an error saving your changes. Please try again.
```tsx theme={null}
```
### Destructive
⛔
Account will be deleted
This action cannot be undone. All data will be permanently removed.
```tsx theme={null}
```
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.
```tsx theme={null}
Stay logged in
}
/>
```
***
## API Reference
Semantic color variant. Values: `default` · `info` · `success` · `warning` · `error` · `destructive`
Bold heading text of the alert.
Supporting description text shown below the title.
Custom leading icon. When omitted, a default icon is used per variant.
Optional action element (e.g. a Button) placed at the end of the alert.
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
* 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 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