Alert
A component used to display important messages or feedback to the user.
Heads up!
You can customize this alert with different variants.
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>Variants
The Alert component supports multiple variants to indicate different types of
messages. Use the variant prop to specify the style:
- Default: Neutral message.
- Success: Success message.
- Warning: Warning message.
- Error: Error message.
Success
Your action was completed successfully.
Warning
Be careful with this action. It's irreversible.
Error
Something went wrong. Please try again.
Icons
The Alert component automatically includes an icon based on the variant. You
can also provide a custom icon using the icon prop:
Hot Tip!
You can refresh your dev server with `rs` in many CLIs. Pretty slick, huh?
Customization
The Alert component and its subcomponents can be customized using the
className prop or by extending their styles with your design system.
<Alert className="bg-purple-50 text-purple-800">
<AlertTitle>Custom Alert</AlertTitle>
<AlertDescription>This is a custom-styled alert.</AlertDescription>
</Alert>Refer to the source code for more advanced usage and customization options.