Alert

import { Alert } from "@rebasepro/ui";

Props

Prop	Type	Required	Description
children	React.ReactNode	yes
onDismiss	() => void	—
color	"base" | "error" | "warning" | "info" | "success"	—
size	"small" | "medium" | "large"	—
action	React.ReactNode	—
className	string	—
outerClassName	string	—
style	React.CSSProperties	—

Example

This is the example the design-system sync renders and verifies for this component.

import { Alert } from "@rebasepro/ui";

// Ported from UIReferenceView's "Chips & Alerts" section.
export const Colors = () => (
    <div className="flex flex-col gap-2 p-4 max-w-[520px]">
        <Alert color="info">Info — informational message</Alert>
        <Alert color="success">Success — operation completed</Alert>
        <Alert color="warning">Warning — attention required</Alert>
        <Alert color="error">Error — something went wrong</Alert>
    </div>
);