Primitives

Badge

Inline status chip in 3 variants, 6 colors and 2 sizes, with a dot or an icon. Every variant uses an ink measured for its fill.

view .md

Preview

solid

neutralbrandsuccesswarningerrorinfo

soft

neutralbrandsuccesswarningerrorinfo

outline

neutralbrandsuccesswarningerrorinfo

with an icon

passingfailedmainNEWneutralbrandsuccesswarningerrorinfo

with a dot

open to workpartialsyncingidle

Installation

terminal

bash

npx @entrepta/cli@latest add badge

Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

badge.tsx

tsx

import { Badge } from "@/components/entrepta/badge"
import { CheckIcon, GitBranchIcon } from "@phosphor-icons/react"

<Badge variant="soft" color="success" icon={CheckIcon}>passing</Badge>
<Badge variant="outline" color="brand" icon={GitBranchIcon}>main</Badge>
<Badge variant="solid" color="brand">FEATURED</Badge>
<Badge variant="soft" color="success" dot>open to work</Badge>
<Badge variant="outline" color="error">deprecated</Badge>
<Badge variant="soft" color="warning" dot>partial</Badge>

Props

Prop	Type	Default	Description
variant	"solid" \| "soft" \| "outline"	"soft"	Fill style
color	"neutral" \| "brand" \| "success" \| "warning" \| "error" \| "info"	"neutral"	Semantic color token
size	"sm" \| "md"	"md"	Height and padding
dot	boolean	false	Renders a colored status dot before the label
icon	Icon \| ReactElement	-	A Phosphor icon, or an icon element, before the label, sized to the badge. Wins over dot