Alert
Alerts are used to display important messages to users. They can be informational, warning, success, or error messages. They help communicate system status, validation errors, or important notifications.
Example
Some average information.
Success
Operation completed successfully.
Please review the following items.
An unexpected error occurred.
This is an informational message.
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop state | Type "success" | "warning" | "error" | "info" | "neutral" | Default value "info" | Description Visual state variant that determines the alert color and icon |
Prop title | Type string | Default value undefined | Description Optional title text displayed prominently in the alert |
Prop text | Type React.ReactNode | Default value undefined | Description Main message content of the alert. Can be text or React nodes. |
Prop size | Type "small" | "medium" | Default value "medium" | Description Size variant of the alert |
Prop type | Type "default" | "banner" | Default value "default" | Description Display type - default (inline) or banner (full-width at top of page) |
Prop dismissable | Type boolean | Default value false | Description Whether the alert can be dismissed with a close button |
Prop showIcon | Type boolean | Default value true | Description Whether to display the state icon in the alert |
Prop customIcon | Type | Default value undefined | Description Custom icon name to override the default state icon |
Quick start
import { Alert } from '@clickhouse/click-ui'
function MyAlert() {
return (
<Alert
state="success"
title="Success"
text="Operation completed successfully."
showIcon
/>
)
}Related components
- Text: Alerts often contain text content.
- Button: Sometimes used within alerts for actions.
- Container: For organizing multiple alerts.
Common use cases
Success alert
Success
Your changes have been saved successfully.
import { Alert } from '@clickhouse/click-ui'
function SuccessAlert() {
return (
<Alert
showIcon
state="success"
title="Success"
text="Your changes have been saved successfully."
/>
)
}Error alert
An error occurred while processing your request. Please try again.
import { Alert } from '@clickhouse/click-ui'
function ErrorAlert() {
return (
<Alert
showIcon
state="danger"
text="An error occurred while processing your request."
/>
)
}Warning alert
Please review the following items before proceeding.
import { Alert } from '@clickhouse/click-ui'
function WarningAlert() {
return (
<Alert
showIcon
state="warning"
text="Please review the following items before proceeding."
/>
)
}Banner alert
Information that belongs in a banner
import { Alert } from '@clickhouse/click-ui'
function BannerAlert() {
return (
<Alert
showIcon
state="info"
text="Important system announcement"
type="banner"
/>
)
}