alert API
alerts/alert.tsx
Alert
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | AlertVariantInput | undefined | AlertVariant.Info | Status color. |
header | any | — | Bold heading rendered above the body. |
icon | any | — | Replace the variant icon; pass `null` to hide it. |
actions | any | — | Action buttons/links rendered under the content. |
AlertVariant
alerts/banner.tsx
Banner
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | — | |
variant | BannerVariantInput | undefined | BannerVariant.Info | Color scheme. |
icon | any | — | Replace the variant icon; pass `null` to hide it. |
dismissible | boolean | undefined | false | Show a dismiss (×) button that hides the banner. |
fixed | boolean | undefined | false | Pin to the viewport (`position: fixed`) at `position`. |
sticky | boolean | undefined | false | Stick to the scroll edge (`position: sticky`) at `position`. |
position | "top" | "bottom" | undefined | top | Edge used by `fixed`/`sticky` placement. |
animated | boolean | undefined | false | Subtle attention animation on the icon. |
action | { label: string; onClick: () => void; } | undefined | — | Call-to-action button rendered after the content. |
Show native HTML props
Native HTML Props
| Prop | Type | Default | Description |
|---|---|---|---|
onDismiss | (() => void) | undefined | — | Called after the dismiss button hides the banner. |