Components
Alert
Displays contextual feedback messages for user actions. Supports multiple variants, color roles, and dismissible behavior.
import{ Alert }from"oks-ui"
3 variants7 color rolesDismissibleCustom iconTitle & description
Colors
Semantic colors to communicate intent.
Info
Information message
Success
Operation completed
Warning
Please check your input
Danger
Something went wrong
Dismissible
Allow users to dismiss the alert via a close button.
Closable Alert
Click the X to dismiss.
Interactive Playground
Controls
Preview
Alert Title
This is an alert message.
Generated Code
<Button>Button</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | The alert title. |
| description | ReactNode | — | Additional description text. |
| variant | "solid" | "soft" | "bordered" | "solid" | Visual style variant. |
| color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "default" | Semantic color role. |
| isClosable | boolean | false | Show a close button. |
| icon | ReactNode | — | Custom icon override. |
| hideIcon | boolean | false | Hide the icon. |
| hideIconWrapper | boolean | false | Hide the icon wrapper. |
| size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | "md" | Alert size. |
| onClose | () => void | — | Called when the alert is closed. |
title—
ReactNode
The alert title.
description—
ReactNode
Additional description text.
variant"solid"
"solid" | "soft" | "bordered"
Visual style variant.
color"default"
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"
Semantic color role.
isClosablefalse
boolean
Show a close button.
icon—
ReactNode
Custom icon override.
hideIconfalse
boolean
Hide the icon.
hideIconWrapperfalse
boolean
Hide the icon wrapper.
size"md"
"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"
Alert size.
onClose—
() => void
Called when the alert is closed.