Badge

Badge is a single element that renders a span by default and can render as another element, such as a link. Badges can hold text and an icon on either side.

Use the render prop to render the badge as another element: render={<a href="/" />}.

Set asChild and pass the element as the only child to render the badge as it.

Pass a render function that returns the element; spread the props it receives onto it.

Use a badge to tag content with a short status or category. For actions, use Button instead.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/badge

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add badge

Manual

Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react class-variance-authority

Copy the source into components/ui/badge.tsx:

Update the import paths to match your project.

Usage

import { Badge }

<Badge

Mark icons with data-icon="inline-start" or data-icon="inline-end" so the outline and ghost variants tighten their padding on that side. Icons are sized to size-3.

Pass render with an anchor element, for example an a with an href, to make the badge a link. Linked badges get hover styles that depend on the variant.

To use a custom color, override the text color with a className such as text-green-600 dark:text-green-400.

Examples

Variants

Shows the default, secondary, destructive, outline, ghost and link variants.

With icon

Places icons before and after the label with data-icon.

As link

Renders the badge as a link.

Custom color

Overrides the text color with utility classes.

API Reference

Badge

The inline label element.

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "outline" \| "ghost" \| "link"`	`"default"`	Visual style. `default`, `secondary`, `destructive` and `link` are text-only; `outline` adds a border and `ghost` adds horizontal padding.

Also accepts the props of useRender.ComponentProps<"span">.

Accessibility

A badge is static text by default and is not focusable.
When rendered as a link, it shows a focus ring on keyboard focus.
aria-invalid adds a border-destructive border.

Notes

Styling hook: data-slot="badge", plus data-variant from the render state.
The destructive variant also tints the focus ring with ring-destructive/20 (ring-destructive/40 in dark mode).
Badges are a fixed h-5 with fully rounded corners and do not wrap text.

Badge is a compact pill View that passes a small, bold text style and a 12-point icon size to its children. Six variants are available. default, secondary, destructive and link show colored text with no background, while outline adds a hairline border and ghost adds horizontal padding.

Use default for highlighted labels, secondary for neutral metadata, destructive for errors and outline when the badge needs a visible edge.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/badge

See Installation for the components.json setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add badge

$ pnpm dlx @esuiss/ui@latest add badge --platform swift

import SwiftUI import UIKit struct RGBA: Sendable { let red: CGFloat let green: CGFloat let blue: CGFloat let alpha: CGFloat init(_ hex: UInt32, _ alpha: CGFloat = 1) { red = CGFloat((hex >> 16) & 0xFF) / 255 green = CGFloat((hex >> 8) & 0xFF) / 255 blue = CGFloat(hex & 0xFF) / 255 self.alpha = alpha }

import SwiftUI public enum EsuissColor { public static let background = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000)) public static let foreground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7)) public static let card = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F)) public static let cardForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7)) public static let popover = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F)) public static let popoverForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7)) public static let primary = Color.adaptive(light: .init(0x0071E3), dark: .init(0x2997FF)) public static let primaryForeground = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF)) public static let secondary = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1)) public static let secondaryForeground = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7)) public static let muted = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617)) public static let mutedForeground = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6)) public static let accent = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))

import SwiftUI public struct VariantButtonStyle: ButtonStyle { public enum Variant: CaseIterable, Sendable { case `default`, outline, secondary, tinted, ghost, plain, destructive, link } public enum Size: CaseIterable, Sendable { case `default`, xs, sm, lg, xl, icon, iconXs, iconSm, iconLg, iconXl var height: CGFloat { switch self { case .xs, .iconXs: 24 case .sm, .iconSm: 32 case .default, .icon: 36 case .lg, .iconLg: 44

import SwiftUI extension EnvironmentValues { @Entry var buttonGroup: Axis? = nil @Entry var buttonGroupSize: CGSize = .zero } enum ButtonGroupSpace: Hashable { case group } struct ButtonGroupFrame { let bounds: Anchor<CGRect> let outlined: Bool }

import SwiftUI public enum TextVariant: CaseIterable, Sendable { case `default`, h1, h2, h3, h4, p, blockquote, code, lead, large, small, muted var style: TextStyle { switch self { case .h1: .xl3 case .h2: .xl2 case .h3: .xl case .h4, .lead, .large: .lg case .code, .small, .muted: .sm default: .base } }

import { SealCheckIcon, StarIcon } from "phosphor-react-native" import { View } from "react-native" import { Badge } from "@/components/ui/badge" import { Icon } from "@/components/ui/icon" import { Text } from "@/components/ui/text" export function BadgeWithIconExample() { return ( <View className="flex-row flex-wrap gap-2"> <Badge variant="secondary"> <Icon as={SealCheckIcon} /> <Text>Verified</Text> </Badge> <Badge variant="outline"> <Icon as={StarIcon} /> <Text>Featured</Text> </Badge> <Badge variant="outline" className="min-w-5 px-1"> <Text>8</Text> </Badge> </View> ) }