Feedback

Badge

Small pill for status or a topic tag.

• tone: neutral, new, success, warning, danger, info; status tones should carry an icon too. Or pass topic to echo a node color.
• One to two words. Not a button.

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface BadgeProps {
  tone?: 'neutral' | 'new' | 'success' | 'warning' | 'danger' | 'info';
  topic?: Topic;
  icon?: IconName;
  children: ReactNode
}

Use

import { Badge } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/Badge/README.md