Components

Badge

Square status label in Barlow Condensed capitals: ink fill, tint, outline or 2px destructive outline with a cross.

LiveDraftArchivedRetracted

Install

bash

npx shadcn add @eloquent/badge

Usage

tsx

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

<Badge>Live</Badge>
<Badge variant="outline">Archived</Badge>
<Badge variant="destructive">Retracted</Badge>

States

defaultLive

secondaryDraft

outlineArchived

destructiveRetracted

figureNo. 1,204

State	Treatment
`default`	Ink fill, paper text
`secondary`	tint-1 fill, 1px ink border
`outline`	Paper fill, 1px ink border
`destructive`	2px ink border and a cross icon

Keyboard

This component is not interactive. It is not a tab stop, so Tab skips it.

Key	Action
Tab	Skips it; not a tab stop

Vietnamese

Đang đăngBản nhápLưu trữĐã gỡ

Ink adaptation

Upstream's pill (rounded-full) and coloured destructive fill become a square label with a 1px ink border. destructive uses a 2px border and an ink cross, so it is never colour alone. Text is Barlow Condensed 700 capitals, 10px, tabular.