Alert

Displays a status message in the flow of the page, at a severity from note to fault.

All good
Every service is running normally.

Variants

Supported configurations for this component.

DefaultAccentWarningFault

Variants

4 examples
Default
All good
Every service is running normally.
Accent
New activity
3 new events in the last hour.
Warning
Fault

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

PropTypeDefaultDescription
variant'default'|'accent'|'warning'|'fault''default'One of: default, accent, warning, fault.
childrenReact.ReactNode-Content rendered inside the component.
classNamestring-Additional CSS classes applied to the root element.
styleReact.CSSProperties-Inline styles applied to the root element.

More Andromeda Pro components

Avatar

Represents a person as a square image tile that falls back to their initials.

6 variants1 states

Badge

Displays the state a row or cell reports, such as online, queued, or fault.

8 variants

Button

Triggers an action or event, at the level of emphasis the action deserves.

6 variants6 states