Alert
Inline, non‑modal feedback message with optional title, description, and icon. Provides accessible semantics and variants for emphasis.
Alert
The Alert component surfaces inline messages that draw attention without interrupting flow. Use it for confirmations, information, warnings, and errors that don't require a modal.
Use Alert for inline feedback that complements the surrounding UI. For disruptive, confirm‑before‑continue flows, use Alert Dialog.
Features
- Accessible by default (role="alert")
- Title and description building blocks
- Variants for tone: default and destructive
- Works with icons from the system
- Fully composable; bring your own content and layout classes
Usage
import { Alert, AlertTitle, AlertDescription } from '@loke/design-system/alert';
import { AlertCircle } from '@loke/icons';
export default function Example() {
return (
<Alert>
<AlertCircle className="h-4 w-4" />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the CLI.
</AlertDescription>
</Alert>
);
}Tips:
- Add an icon as the first child for quick visual scanning.
- Prefer concise AlertTitle with supporting details in AlertDescription.
- Use the destructive variant for errors and critical issues.
Props
Alert
Prop
Type
AlertTitle
Prop
Type
AlertDescription
Prop
Type
Examples
Default
Heads up!
<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>You can add components to your app using the CLI.</AlertDescription>
</Alert>Destructive
Error
<DestructiveAlertExample />With icon
Information
<WithIconAlertExample />Title only
This is an alert with only a title.
<TitleOnlyAlertExample />Description only
<DescriptionOnlyAlertExample />Custom content
Success
Your changes have been saved successfully.
<Alert>
<AlertTitle className="flex items-center gap-2">
<CheckCircle className="h-4 w-4 text-green-500" />
<span>Success</span>
</AlertTitle>
<AlertDescription>
<p>Your changes have been saved successfully.</p>
<button className="mt-2 text-sm font-medium underline" type="button">Undo</button>
</AlertDescription>
</Alert>Multiple alerts
Information
Warning
Success
<MultipleAlertsExample />Long content
Terms and Conditions
By using this application, you agree to our terms and conditions. These terms outline your rights and responsibilities as a user of our platform. Please read them carefully before proceeding.
We reserve the right to modify these terms at any time. It is your responsibility to check for updates regularly. Continued use of the application after changes constitutes acceptance of the new terms.
<Alert>
<AlertTitle>Terms and Conditions</AlertTitle>
<AlertDescription>
<p>By using this application, you agree to our terms and conditions...</p>
<p className="mt-2">We reserve the right to modify these terms...</p>
</AlertDescription>
</Alert>With a dismiss button (custom)
Update Available
<Alert className="relative">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Update Available</AlertTitle>
<AlertDescription>A new update is available. Install it now?</AlertDescription>
<button className="absolute right-4 top-4" aria-label="Dismiss" type="button">
{/* close icon */}
</button>
</Alert>Accessibility
- Uses role="alert" so assistive tech announces the message.
- Make the title concise and the description specific with actionable guidance if relevant.
- Don’t rely on color alone; pair icons and text for clarity.
- Ensure sufficient color contrast for text and focus states.
Best practices
- Reserve destructive for errors or high‑severity warnings.
- Keep titles short; details go in the description.
- Use icons sparingly to reinforce meaning.
- Place alerts near related content so users understand the context quickly.
- Avoid stacking too many alerts; prioritize or consolidate messaging.