alert
Feedback message with dither border
Corealert.css
Installation
$
npx skeehn add alertPreview
i
This is an informational alert message.
✓
Operation completed successfully.
!
Please review before proceeding.
✗
An error occurred during processing.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'info' | 'success' | 'warning' | 'destructive' | 'info' | Alert semantic type |
| variant | 'solid' | 'dither' | 'outline' | — | Visual variant |
Usage
alert.tsx
1import { Alert } from '@skeehn/react';23export function Alerts() {4 return (5 <div className="flex flex-col gap-3">6 <Alert type="info">Check out the new features.</Alert>7 <Alert type="success">Changes saved successfully.</Alert>8 <Alert type="warning">Disk space running low.</Alert>9 <Alert type="destructive">Failed to save changes.</Alert>10 </div>11 );12}