Badge

<ts-badge> vv0.4.0

The ts-badge component.

Open in Storybook for interactive demos.

Preview

<ts-badge size="md" variant="primary">Content</ts-badge>

Properties

Property	Attribute	Type	Default	Description
dot	dot	boolean	false	Renders the badge as a small dot indicator (content is hidden).
outline	outline	boolean	false	Renders an outlined style instead of solid.
pill	pill	boolean	false	Renders the badge with rounded-pill shape.
size	size	"lg" | "md" | "sm" | "xl" | "xs"	'md'	The badge’s size.
variant	variant	"danger" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning"	'primary'	The badge’s color variant.

Slots

Name	Description
*(default)*	Default slot for badge content.

CSS Parts

Use ::part() to style internal elements:

Part	Description
base	The badge element.

ts-badge::part(base) {
  /* your custom styles */
}

Usage

HTML

<ts-badge size="md" variant="primary">Content</ts-badge>

React

import { TsBadge } from '@tessera-ui/react';

<TsBadge size="md" variant="primary">Content</TsBadge>