Alert
The Alert component is a versatile component that displays a message to the user with various customization options. It supports different severity levels, variants, colors, and additional actions.
Installation
Install the package
npm i @start-base/start-uiAdd the styles
To use the React form elements styles in a Next.js project, import the styles in your layout.tsx file.
app/layout.tsx
import "@start-base/start-ui/styles.css";Import the component
import Alert from '@start-base/start-ui/Alert';Usages
Alert With Severity
This is an error
Alert With Variant
This is a filled alert
Alert With Color
This is an info disguised as a warning
Alert With Action
This is an alert with an action button. Try clicking on the button.
Alert With Title
Custom Alert Title!
This is an alert with title
API
| Name | Type | Default | Variants | Description |
|---|---|---|---|---|
| children | string | Children of the alert | ||
| severity | string | success | success info warning error | Severity of the alert |
| variant | string | default | default filled outlined | Variant of the alert |
| color | string | inherit | inherit success info warning error | Color of the alert |
| actionElement | object | Action element of the alert | ||
| icon | boolean | true | Icon of the alert | |
| alertTitle | boolean | true | Alert title of the alert | |
| open | boolean | true | Open of the alert | |
| className | string | Classname of the alert | ||
| iconClassName | string | IconClassName of the alert | ||
| bodyClassName | string | BodyClassName of the alert | ||
| titleClassName | string | TitleClassName of the alert | ||
| textClassName | string | TextClassName of the alert |