Badge

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @termcn/ink/badge
Copy

Usage

Copyimport { Badge } from "@/components/ui/badge";

Copy<Badge variant="success">Active</Badge>

Examples

Basic

A basic default badge.

import { Badge } from "@/components/ui/badge";

export function BadgeBasic() {
  return <Badge>Default</Badge>;
}

Bold Without Border

Use bold and bordered={false} for an inline label style.

import { Badge } from "@/components/ui/badge";

export function BadgeBold() {
  return (
    <Badge bold bordered={false}>
      Inline Label
    </Badge>
  );
}

Custom Border Style

Customize the border style and padding.

import { Badge } from "@/components/ui/badge";

export function BadgeCustomBorder() {
  return (
    <Badge variant="info" borderStyle="double" paddingX={2}>
      Important
    </Badge>
  );
}

API Reference

Badge

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

• Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.