Badge

Displays a small pill of status or metadata, with variant and color token support.

Active

Usage

badge-demo.tsx

import { Badge } from 'trivela-ui';

export function Example() {
  return <Badge color="success">Active</Badge>;
}

Four style variants share the same pill shape and text size.

solidoutlineghostsubtle

Every variant accepts the full color scale.

primarysecondarysuccesswarningdangerinfoneutral

Colors carry meaning, so map each status onto the matching token.

api-server-deployedDeployed

api-server-pendingPending

api-server-failedFailed

Prop	Type	Default	Description
variant	'solid' \| 'ghost' \| 'outline' \| 'subtle'	'solid'	Style variant for the component.
color	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'	'neutral'	Color scale used by the component.
size	'sm' \| 'md' \| 'lg'	'md'	Padding and text size.
className	string	—	Merged with the generated classes via cn().
...props	HTMLAttributes<HTMLSpanElement>	—	All native attributes are forwarded to the root element.