Tag

A small uppercase pill for taxonomy — a provider (bedrock), a language (Go), a topic. Pill-shaped (the one place pills are allowed). Not for status.

jsx

<Tag>Go</Tag>
<Tag tone="brand">gRPC</Tag>
<Tag tone="gilt">beta</Tag>

Tones: default · brand · gilt · oxblood. onDark for ink backgrounds.

Preview

Declarations

TypeScript

export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
  /** Colour tone. */
  tone?: 'default' | 'brand' | 'gilt' | 'oxblood';
  onDark?: boolean;
  className?: string;
  children?: React.ReactNode;
}

/**
 * A small uppercase pill for taxonomy — a provider name, a language, a topic.
 * Not for status (use StatusDot/Badge).
 */
export function Tag(props: TagProps): React.JSX.Element;