Thành phần
Badge
Square status label in Barlow Condensed capitals: ink fill, tint, outline or 2px destructive outline with a cross.
Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.
Xem trước
LiveDraftArchivedRetracted
Install
bash
npx shadcn add @eloquent/badgeUsage
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.