Alert

Alert presents short feedback or status messages with optional icon, title, and content areas.

Root Props

Prop	Type	Default
`variant`	`AlertVariant`	`'info'`
Visual style of the alert. Determines background color, border, and icon style. 'success': Indicates a positive or successful action; 'error': Indicates an error or failure; 'warning': Indicates a caution or risk; 'info': Neutral informational message
`appearance`	`AlertAppearance`	`'fill'`
Visual appearance of the badge. Defines how the badge is styled (background, border, etc.).

Also accepts ref and all <div> attributes.

Prop	Type	Default
`size`	`IconSize`	—
Predefined size token for the icon. Can be overridden by explicit width and height.
`ref`	`Ref<SVGSVGElement>`	—
Ref to the SVG element
`strokeWidth`	`number`	—
Stroke thickness for SVG lines and shapes (in px or pt).
`children`	`ReactNode`	—
Icon content (required). Accepts: icons from `~/icons`; custom inline SVG; third-party icon components (e.g. Lucide, Tabler)

Also accepts all HTML attributes.

Also accepts all <div> attributes.

Prop	Type	Default
`size`	`TextSize`	—
Visual size of the text, typically mapped to the design system’s type scale.
`asChild`	`boolean`	—
If true, renders the text as a child component using `Slot`. Useful for compatibility with native elements or other components.
`fontWeight`	`400 \| 500 \| 600 \| 700 \| 900`	—
Font weight applied to the text. Common values: 400: Regular; 500: Medium; 600: Semi-bold; 700: Bold; 900: Extra bold
`ref`	`Ref<HTMLSpanElement>`	—
Ref to the underlying `<span>` or slotted element. Useful for measuring, focusing, or DOM manipulation.

Also accepts all <span> attributes.

Prop	Type	Default
`size`	`TextSize`	—
Visual size of the text, typically mapped to the design system’s type scale.
`asChild`	`boolean`	—
If true, renders the text as a child component using `Slot`. Useful for compatibility with native elements or other components.
`fontWeight`	`400 \| 500 \| 600 \| 700 \| 900`	—
Font weight applied to the text. Common values: 400: Regular; 500: Medium; 600: Semi-bold; 700: Bold; 900: Extra bold
`ref`	`Ref<HTMLSpanElement>`	—
Ref to the underlying `<span>` or slotted element. Useful for measuring, focusing, or DOM manipulation.

Also accepts all <span> attributes.

Alert is stateless from the component API perspective.
Consumer state usually decides whether the alert is rendered, dismissed, or replaced.
useAlertContext is available for advanced wrappers and custom child parts.