npm i @velkin/react
import { VuAlert } from "@velkin/react/alert";| Prop | Type | Default | Description |
|---|---|---|---|
| color | VuAlertColor | "default" | Intent driving surface color. Default: `"default"`. |
| variant | VuAlertVariant | "soft" | Surface paint recipe. Default: `"soft"`. |
| size | VuAlertSize | "md" | Padding, gap, and font scale. Default: `"md"`. |
| heading | string | "" | Heading text above the body. |
| message | string | "" | Body text when the default slot is empty. |
| icon | null | string | null | Iconify name; `null` derives from `color`, `""` disables. |
| removable | boolean | false | Shows a dismiss button. Default: `false`. |
| closeLabel | string | "" | Dismiss accessible name (`closelabel` attr). |
| Event | Detail | Description |
|---|---|---|
| vu-close | VuAlertCloseDetail | Cancelable before exit animation. |
| Slot | Description |
|---|---|
| — | - Body content when `message` is empty. |
| heading | Heading content when `heading` is empty. |
| icon | Custom leading icon. |
| actions | Trailing buttons or links. |
| Part | Description |
|---|---|
| alert | Outer surface container. |
| icon | Leading icon wrapper. |
| stack | Heading and body column. |
| heading | Heading text element. |
| body | Body region wrapper. |
| message | Body paragraph when `message` is set. |
| actions | Trailing controls cluster. |
| close | Dismiss button when `removable`. |
| Method | Description |
|---|---|
| close | - Programmatic dismiss; fires `vu-close` then animates out. |
| Name | Definition |
|---|---|
| string | null | |
| VuAlertCloseDetail | |
| VuAlertColor | |
| VuAlertSize | |
| VuAlertVariant | |