Compact labels for status and metadata.
Add this item from the registry, or import it from the package after installing Default File UI.
Registry path
itsvigneshv/default-file-ui/badgePackage import
import { Badge } from "@default-file/ui/components/df-badge"Default badge label.
All visual variants.
T-shirt sizes from XS to XL. Default is MD.
Dismissible chip with a trailing close control.
Nested count badge inside the host. Only MD, LG, and XL. XS and SM are too tight to read.
Badge as an OptionList trigger with a chevron. Panel align is configurable: start, end, or auto (content-aware).
Compact label for status and metadata. Compose a close control, nested counter, or OptionList dropdown via children and render.
| Prop | Type | Default | Notes |
|---|---|---|---|
| variant | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "default" | Visual style of the badge. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | T-shirt height and type size. Nested counter chips are supported on md, lg, and xl only. |
| render | ReactElement | — | Host element to clone badge styles onto. For dropdowns, prefer OptionListTrigger render={<Badge />}. |
| asChild | boolean | — | Legacy alias for composing onto a child host. |
| children | ReactNode | — | Label and optional trailing content: close button, nested count badge, or chevron. |
| className | string | — | Additional styles on the badge. |
| …HTML attributes | HTMLAttributes<HTMLElement> | — | Standard element attributes (id, title, aria-*, etc.). |
Patterns built with children or render. Not separate props on Badge.
| Prop | Type | Default | Notes |
|---|---|---|---|
| Close button | children | — | Place a button with an X icon after the label. The button inherits badge color and is keyboard-focusable. |
| Counter | children | — | Nest a second Badge for a count chip. Host size must be md, lg, or xl so the inner chip stays readable. |
| Dropdown | OptionListTrigger render={<Badge />} | — | OptionListTrigger owns open/close. Pass Badge via render so the chip is the clickable host. Pair with OptionListContent for the menu. |
Pass these on OptionListContent when the badge opens an option list. Placement is relative to the badge trigger.
| Prop | Type | Default | Notes |
|---|---|---|---|
| align | "start" | "center" | "end" | "auto" | "start" | Horizontal menu alignment. start pins left, end pins right, center centers on the badge, auto picks the best fit from available space (content-aware). |
| alignOffset | number | 0 | Extra shift along the alignment axis in pixels. |
| side | "top" | "bottom" | "left" | "right" | "bottom" | Preferred side of the badge for the menu. |
| sideOffset | number | 4 | Gap between the badge and the menu. |
| alignItemWithTrigger | boolean | false | When true, menu width matches the badge. When false, the menu sizes to its option content. |