Alert

Feedback

Stablev1.0.0

Inline feedback component for displaying important messages to users

Preview

Heads up!

You can add components to your app using the CLI.

Success

Your changes have been saved successfully.

Error

There was a problem with your request.

Warning

This action cannot be undone.

Installation

npx @component-labs/cli add alert

This will:
- Install required dependencies
- Copy the Alert component to your project
- Add utility functions (cn helper)

Make sure you've initialized Component Labs first:
```bash
npx @component-labs/cli init
```

Usage

import { Alert } from "@component-labs/ui";

<Alert description="This is an informational message" />

Props

Name	Type	Default	Description
`variant`	`"default" \| "success" \| "error" \| "warning" \| "info"`	`"default"`	Visual style variant
`title`	`ReactNode`	`-`	Alert title
`description`	`ReactNode`	`-`	Alert description/message
`icon`	`ReactNode`	`-`	Custom icon to display
`showIcon`	`boolean`	`true`	Whether to show the default icon
`dismissible`	`boolean`	`false`	Whether the alert can be dismissed
`onDismiss`	`() => void`	`-`	Callback when alert is dismissed
`className`	`string`	`-`	Additional CSS classes

Examples

Basic

Simple alert with message

<Alert description="This is an informational message" />

With Title

Alert with title and description

<Alert
  title="Heads up!"
  description="You can add components to your app using the CLI."
/>

Success

Success alert

<Alert
  variant="success"
  title="Success"
  description="Your changes have been saved successfully."
/>

Error

Error alert

<Alert
  variant="error"
  title="Error"
  description="There was a problem with your request."
/>

Warning

Warning alert

<Alert
  variant="warning"
  title="Warning"
  description="This action cannot be undone."
/>

Info

Info alert

<Alert
  variant="info"
  title="Did you know?"
  description="You can use keyboard shortcuts to navigate faster."
/>

Dismissible

Alert that can be closed

const [show, setShow] = useState(true);

{show && (
  <Alert
    dismissible
    onDismiss={() => setShow(false)}
    title="Cookie Policy"
    description="We use cookies to improve your experience."
  />
)}

Without Icon

Alert without icon

<Alert
  showIcon={false}
  title="Simple Alert"
  description="This alert has no icon"
/>

Custom Content

Alert with custom children

<Alert title="Custom Actions">
  <div className="mt-2 flex gap-2">
    <button>Accept</button>
    <button>Decline</button>
  </div>
</Alert>

Performance

Bundle Size

~2KB gzipped

Minified and gzipped

Dependencies

•class-variance-authority
•clsx
•tailwind-merge
•lucide-react

Accessibility

•Proper ARIA role for alerts
•Screen reader announcements
•Keyboard accessible dismiss buttons
•Color contrast meets WCAG standards