Badge

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

Active

Variants

Supported configurations for this component.

DefaultAccentWarningFaultSubtleOutlineIconIcon fault

Variants

8 examples
Default
Activesm
Activemd
Activelg
Accent
Activesm
Activemd
Activelg
Warning
Activesm
Activemd
Activelg
Fault
Activesm
Activemd
Activelg
Subtle
Activesm
Activemd
Activelg
Outline
Activesm
Activemd
Activelg
Icon
Activesm
Activemd
Activelg
Icon fault
Activesm
Activemd
Activelg

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'|'success'|'subtle'|'outline''default'One of: default, accent, warning, fault, success, subtle, outline.
size'sm'|'md'|'lg''sm'Rung on the LABEL ladder: 20, 24 or 28px tall (not the 28/32/40 control ladder). Defaults to sm, the inline density; pass md or lg to sit beside a field or button of that size.
iconReact.ComponentType-Phosphor icon component; replaces the dot and takes its per-variant color. The icon sizes with the label type.
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

Alert

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

4 variants

Avatar

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

6 variants1 states

Button

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

6 variants6 states