Alert

A component used to display important messages or feedback to the user.

Usage

Import the Alert, AlertTitle, and AlertDescription components from @bun-ui/react and use them in your project:

import { Alert, AlertDescription, AlertTitle } from "@bun-ui/react"

<Alert variant="info">
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>This is an informational alert.</AlertDescription>
</Alert>

Colors

The Alert component supports multiple variants to indicate different types of messages. Use the color prop to specify the style:

Variants

The Alert component comes with two alternative style options filled an outlined, which you can set using the variant prop.

Filled

Outlined

Icons

The Alert component automatically includes an icon based on the variant. You can also provide a custom icon using the icon prop:

Action

Add an action to your Alert with the action prop. This lets you insert any element after the Alert's message.