Components
Alert
A visually emphasized message that informs the user of an event.
Source code
Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
Usage
Basic
Heads up
You have 23 new messages
Destructive
Error
Your session has expired. Please log in again.
Border
New users
Over 25K new users joined today!
Origin UI Examples
These are some examples that I found today over here Origin UI. I think they are cool.
To use these examples you will have to copy the code and adjust it for your own use.
Warning
Some information is missing!
Warning Outline
Some information is missing!
Error
An error occurred!
Error Outline
An error occurred!
Info
Just a quick note!
Info Outline
Just a quick note!
Success
Completed successfully!
Success Outline
Some information is missing!
End Link
Some information is missing! Add it
Sub Data
Password does not meet requirements:
- Minimum 8 characters
- Include a special character
Close Button
This is a description of the error that occurred.
Notifications
Close Button w/ Undo
Your profile has been updated!
Double Button
Message sent
•
Success Learn More
Your request was completed!
It demonstrates that the task or request has been processed.
Privacy
We Value Your Privacy 🍪
We use cookies to improve your experience, and show personalized content.
Version Update
Version 1.4 is now available!
This update contains several bug fixes and performance improvements.
Mentioned
MP
Mary Palmer mentioned you in project-campaign-02
2 min ago
API Reference
Alert
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
iconClass | ClassValue | — | No | Classes to add to the icon. |
filled | boolean | undefined | — | No | Whether the alert should have a filled/colored background. |
modelValue | boolean | undefined | true | No | Whether or not the `Alert` is shown. |
variant | any | "default" | No | The variant of the `Alert` |
title | string | undefined | — | No | The title that is passed to the `AlertTitle` component. |
description | string | undefined | — | No | The description that is passed to the `AlertDescription` component. |
icon | string | undefined | — | No | The icon that should be displayed. |
Alert Description
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
asChild | boolean | undefined | — | No | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | AsTag | Component | undefined | "div" | No | The element or component this component should render as. Can be overwritten by `asChild`. |
description | string | undefined | — | No | The description text that should be displayed. |
Alert Title
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
asChild | boolean | undefined | — | No | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details. |
as | AsTag | Component | undefined | "h5" | No | The element or component this component should render as. Can be overwritten by `asChild`. |
title | string | undefined | — | No | The title text that should be displayed. |