4AF Components

Feedback and status

Badge

A compact label for statuses, categories, and counts.

View as Markdown
⠋

Install

npx shadcn@latest add https://4af.selfsimilar.dev/r/badge.json

Usage

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

<Badge variant="solid" shape="pill">Approved</Badge>
<Badge status="loading">Syncing</Badge>
<Badge status="danger" icons={{ danger: <CircleX /> }}>Failed</Badge>
<Badge color="oklch(0.7 0.15 250 / 0.15)">Beta</Badge>

API

Main exports: Badge, BadgeIconsProvider, types BadgeStatus and BadgeIcons

A label for statuses, categories, and counts, with an optional icon or dot. Label and glyph changes animate through the shared Morph component.

The default size is sm. Boxed badges are 16px high with a 4px radius at sm, 20px with a 4px radius at md, and 24px with a 6px radius at lg.

Variants

VariantTreatment
solid (default)A translucent status-coloured fill; text and icon in the same, stronger status colour.
outlineNo fill and a grey outline; only the text and icon follow status.
plainNo background or outline.

shape="pill" fully rounds solid and outline badges; rounded is the default and plain ignores it.

PropDescription
colorAny CSS colour, replacing the solid fill. Used as given, so pass a translucent colour for the default wash look. Text and icon keep the status colour. Ignored by plain and outline. The badge carries data-color while it applies.
<Badge color="oklch(0.7 0.15 250 / 0.15)">Beta</Badge>

Status icons

StatusDefault icon
neutralCircle
infoInfo
successCheck
warningAlertTriangle
dangerOctagonAlert
loadingShared loader (loader, then LoaderProvider, then AsciiLoader)
Prop / partDescription
iconOne glyph for this badge, whatever its status. icon={null} hides it.
iconsPer-status glyphs for this badge, e.g. { danger: <CircleX /> }. Unnamed statuses fall through.
loaderThe loading glyph for status="loading".
BadgeIconsProvider icons={…}Per-status glyphs for every badge in a subtree, portals included. Nested providers merge over outer ones.

Precedence, most specific first: icon, icons, loader (loading only), BadgeIconsProvider, the default. A null entry in icons or the provider hides the icon for that status. Glyphs are sized to the badge (size-2.5 / size-3 / size-3.5) unless they set their own size.

<BadgeIconsProvider icons={{ danger: <CircleX />, success: <CircleCheck /> }}>
  <App />
</BadgeIconsProvider>

Layout animation

Badge animates its width when its content changes. In a list that filters or reorders, such as a Command Palette or a table row, set animateLayout={false} on badges whose content doesn't change. Otherwise the badge FLIP-animates its own position as the row moves, which slides it within the row and adds layout cost.

<Badge animateLayout={false}>Beta</Badge>

On this page