Badge

Small badge for displaying labels or status indicators.

import { Badge } from 'ui-lab-components/badge';
Badge Text
import { Badge } from 'ui-lab-components/badge';
 
export default function Example() {
  return (
    <Badge>
      Badge Text
    </Badge>
  );
}

badge/applied-filters

Active filters on a deployments list shown as dismissible badges. Each dismiss removes that filter from state.

Loading interactive preview
{filters.map((filter) => (
  <Badge key={filter} dismissible onDismiss={() => removeFilter(filter)}>
    {filter}
  </Badge>
))}

badge/beta-feature-heading

A badge set beside a settings section heading to flag a feature as beta without changing the layout of the section.

Loading interactive preview
<Flex gap="sm" align-center>
  <h3>Deploy hooks</h3>
  <Badge variant="info">Beta</Badge>
</Flex>

badge/deployment-branch

A branch name rendered as an icon badge inside an activity sentence. Passing a single node to icon places it on the left.

Loading interactive preview
<p>
  Deployed <Badge icon={<Icon id="branch" size={10} />}>release/2.4</Badge> to
  production 3 minutes ago
</p>

badge/pull-request-status

A pull request list where each row ends in a status badge. The variant maps directly to the PR state, so status is scannable down the right edge.

Loading interactive preview
<Flex justify-between align-center gap="md">
  <span>Migrate session store to Redis #482</span>
  <Badge variant="success">Merged</Badge>
</Flex>

badge/tab-counts

Pill badges inside buttons that show item counts per view. The count prop renders the number, and a danger variant draws attention to failures.

Loading interactive preview
<Button variant="secondary">
  Open issues <Badge pill count={openIssues} />
</Button>
<Button variant="ghost">
  Failed runs <Badge pill variant="danger" count={failedRuns} />
</Button>