Alert
Usage
The ShAlert constructor creates a notification field with different background color to showcase the importance of notification.
Basic
This is info type of alert
Testing alert component related to info. This is the default alert type.
::ShAlert
Testing alert component related to info. This is the default alert type.
::
This is success type of alert
Testing alert component related to success
::ShAlert
---
typeAlert: success
---
Testing alert component related to success
::
This is warning type of alert
Testing alert component related to warning
::ShAlert
---
typeAlert: warning
---
Testing alert component related to warning
::
This is danger type of alert
Testing alert component related to danger
::ShAlert
---
typeAlert: danger
---
Testing alert component related to danger
::
Advanced settings
Testing alert component with shorten width
::ShAlert
---
ui:
wrapper: "shadow-xl w-fit mx-auto text-2xl" # adds a shadow to the wrapper as well as making the wrapper width fit the lenght of content inside, center the alert wrapper and enlarge text
---
Testing alert component with shorten width
::
Props
| Prop | Type | Default | Description |
|---|---|---|---|
description | string | "" | Note for content writers. It is not rendered on the website. |
typeAlert | string | "info" | This represents the type of the alert. Options: `info`, `success`, `warning` & `danger` |
ui | Record<string, any> | – | Overrides the default classes of the UI config below. Values are merged with the defaults using tailwind-merge. |
Slots
default
UI config
Default classes of every styled element. Override any key through the ui prop.
| Key | Default classes | Description |
|---|---|---|
wrapper | flex items-start gap-4 px-5 py-5 mt-4 mb-4 rounded-lg text-base leading-7 [&_p]:text-inherit [&_p]:my-0 | Defines the overall styling for the container that holds all the elements of the alert. |
content | min-w-0 flex-1 [&_p]:leading-[inherit] [&_p+p]:mt-1 [&_br+br]:hidden | Container of the alert message text. |
base | flex items-center self-start shrink-0 h-[1lh] | A placeholder for additional base styles that can be applied to the alert component. In this specific case, it will target the section around icon. |
alert.success | bg-green-100 dark:bg-green-500/15 text-green-950 dark:text-green-100 relative border border-green-300 dark:border-green-400/30 border-l-4 border-l-green-600 dark:border-l-green-400 | Colors and borders of the alert for each `typeAlert` (`success`, `warning`, `danger`, `info`). |
alert.warning | bg-amber-100 dark:bg-amber-500/20 text-amber-950 dark:text-amber-100 relative border border-amber-300 dark:border-amber-400/40 border-l-4 border-l-amber-500 dark:border-l-amber-400 | Colors and borders of the alert for each `typeAlert` (`success`, `warning`, `danger`, `info`). |
alert.danger | bg-red-100 dark:bg-red-500/15 text-red-950 dark:text-red-100 relative border border-red-300 dark:border-red-400/30 border-l-4 border-l-red-600 dark:border-l-red-400 | Colors and borders of the alert for each `typeAlert` (`success`, `warning`, `danger`, `info`). |
