AlertBanner

PreviousNext

Inline status banner.

import { AlertBanner } from "@/rl-ui";

<AlertBanner variant="success" title="Saved" message="Your changes were published." />

Examples

Variants

import { AlertBanner } from "@/rl-ui";

<>
<AlertBanner variant="info" title="Info" message="Supporting message." />
<AlertBanner variant="warning" title="Warning" message="Supporting message." />
<AlertBanner variant="success" title="Success" message="Supporting message." />
<AlertBanner variant="error" title="Error" message="Supporting message." />
</>

Dismissible

import { AlertBanner } from "@/rl-ui";

<AlertBanner variant="info" title="New feature" message="Try the updated timeline." dismissible />

API

PropTypeDefaultDescription
variant"info" | "warning" | "success" | "error""info"Banner tone.
titleReactNode—Banner title (required).
messageReactNode—Supporting message.
dismissiblebooleanfalseShow dismiss control.
onDismiss() => void—Dismiss handler.
actionReactNode—Optional action slot.
iconReactNode—Override default icon.