Pure Alert
Beautiful, customizable popup alerts. Supports multiple status types, confirmation dialogs, input prompts, loading states, auto-dismiss timer, and custom styling.
1npx purekit add purealert
1import PureAlert from "@/components/purekit-ui/purealert/pureAlert"
Status Types
Display different status icons: success, error, warning, info, and question.
Confirmation Dialog
Ask users to confirm an action with multiple buttons.
Input Prompt
Collect input from users with validation.
Loading State
Show loading state while processing an action.
Auto Dismiss Timer
Automatically close the alert after a specified time with optional progress bar.
Function API
Use pureAlert.open() to show alerts programmatically with async/await support.
Custom Styling
Override default styles using the styles prop.
Main Props
| Name | Type | Default | Description |
|---|---|---|---|
visible required | boolean | - | Whether the alert is visible |
onDismiss | () => void | - | Callback when the alert is dismissed |
status | 'success' | 'error' | 'warning' | 'info' | 'question' | - | Status icon to display |
heading | string | - | Alert title |
description | string | ReactNode | - | Alert message/description |
content | ReactNode | - | Custom content below description |
footerContent | ReactNode | - | Footer content |
Action Props
| Name | Type | Default | Description |
|---|---|---|---|
actions | ActionConfig[] | - | Array of action button configurations |
onAction | (value: string, inputValue?: any) => void | - | Callback when an action button is clicked |
loadingAction | string | - | Value of the action currently loading |
beforeAction | (value: string, inputValue?: any) => Promise<any> | - | Async function to run before action completes |
ActionConfig Object
| Name | Type | Default | Description |
|---|---|---|---|
label required | string | - | Button text |
value required | string | - | Value returned when clicked |
color | string | - | Button color (blue, red, gray, green, etc.) |
variant | 'contained' | 'outlined' | 'ghost' | 'contained' | Button style variant |
autoFocus | boolean | - | Auto focus this button when alert opens |
loading | boolean | - | Show loading state on this button |
disabled | boolean | - | Disable this button |
className | string | - | Custom class for this button |
Input Props
| Name | Type | Default | Description |
|---|---|---|---|
inputType | 'text' | 'email' | 'password' | 'textarea' | 'select' | - | Type of input to display |
inputLabel | string | - | Label for the input |
inputHint | string | - | Placeholder text for the input |
inputDefaultValue | string | - | Default value for the input |
inputChoices | Object | - | Options for select input { value: label } |
validateInput | (value: string) => string | null | - | Validation function, returns error message or null |
Behavior Props
| Name | Type | Default | Description |
|---|---|---|---|
autoDismissAfter | number | - | Auto dismiss after specified milliseconds |
showDismissProgress | boolean | false | Show progress bar for auto dismiss |
dismissOnBackdrop | boolean | true | Dismiss when backdrop is clicked |
dismissOnEscape | boolean | true | Dismiss when ESC key is pressed |
Style Props
| Name | Type | Default | Description |
|---|---|---|---|
styles | StylesConfig | - | Custom styles object for each element |
className | string | - | Additional class name for root element |