Badge

A span styled with the badge recipe. Pick a variant and a size, and set colorPalette to change its color. Use a tag instead when the label can be removed or clicked.

Usage

import { Badge } from "@isbatak/react-ui/badge"
import { HStack } from "styled-system/jsx"

export function BadgeDemo() {
  return (
    <HStack gap="2">
      <Badge>Default</Badge>
      <Badge colorPalette="green">Success</Badge>
      <Badge colorPalette="red">Removed</Badge>
      <Badge colorPalette="purple">New</Badge>
    </HStack>
  )
}

<Badge>Badge</Badge>

Examples

Variants

Set variant to solid, subtle, outline, surface or plain. The default is subtle.

SolidSubtleOutlineSurfacePlain

import { Badge } from "@isbatak/react-ui/badge"
import { HStack } from "styled-system/jsx"

export function BadgeVariantsDemo() {
  return (
    <HStack gap="2">
      <Badge variant="solid">Solid</Badge>
      <Badge variant="subtle">Subtle</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="surface">Surface</Badge>
      <Badge variant="plain">Plain</Badge>
    </HStack>
  )
}

Sizes

Set size to xs, sm, md or lg. The default is sm.

Extra smallSmallMediumLarge

import { Badge } from "@isbatak/react-ui/badge"
import { HStack } from "styled-system/jsx"

export function BadgeSizesDemo() {
  return (
    <HStack gap="2">
      <Badge size="xs">Extra small</Badge>
      <Badge size="sm">Small</Badge>
      <Badge size="md">Medium</Badge>
      <Badge size="lg">Large</Badge>
    </HStack>
  )
}

Colors

Set colorPalette to any palette in the theme: gray, blue, green, yellow, red, orange, teal, cyan, purple or pink. The default is gray.

NeutralInfoSuccessWarningError

OrangeTealCyanPurplePink

import { Badge } from "@isbatak/react-ui/badge"
import { Stack, Wrap } from "styled-system/jsx"

export function BadgeColorsDemo() {
  return (
    <Stack gap="3">
      <Wrap gap="2">
        <Badge colorPalette="gray">Neutral</Badge>
        <Badge colorPalette="blue">Info</Badge>
        <Badge colorPalette="green">Success</Badge>
        <Badge colorPalette="yellow">Warning</Badge>
        <Badge colorPalette="red">Error</Badge>
      </Wrap>
      <Wrap gap="2">
        <Badge colorPalette="orange">Orange</Badge>
        <Badge colorPalette="teal">Teal</Badge>
        <Badge colorPalette="cyan">Cyan</Badge>
        <Badge colorPalette="purple">Purple</Badge>
        <Badge colorPalette="pink">Pink</Badge>
      </Wrap>
    </Stack>
  )
}

Set status to put a dot before the label, drawn the same way as the status recipe's indicator. The dot takes the palette's solid color. With outline the text and border stay neutral so only the dot carries the color, and with solid the dot uses the palette's contrast color so it stays visible.

NeutralInfoSuccessWarningError

SolidSubtleSurface

import { Badge } from "@isbatak/react-ui/badge"
import { Stack, Wrap } from "styled-system/jsx"

export function BadgeStatusDemo() {
  return (
    <Stack gap="6">
      <Wrap gap="2">
        <Badge status variant="outline" colorPalette="gray">
          Neutral
        </Badge>
        <Badge status variant="outline" colorPalette="blue">
          Info
        </Badge>
        <Badge status variant="outline" colorPalette="green">
          Success
        </Badge>
        <Badge status variant="outline" colorPalette="yellow">
          Warning
        </Badge>
        <Badge status variant="outline" colorPalette="red">
          Error
        </Badge>
      </Wrap>
      <Wrap gap="2">
        <Badge status variant="plain" colorPalette="gray">
          Neutral
        </Badge>
        <Badge status variant="plain" colorPalette="blue">
          Info
        </Badge>
        <Badge status variant="plain" colorPalette="green">
          Success
        </Badge>
        <Badge status variant="plain" colorPalette="yellow">
          Warning
        </Badge>
        <Badge status variant="plain" colorPalette="red">
          Error
        </Badge>
      </Wrap>
      <Wrap gap="2">
        <Badge status variant="solid" colorPalette="green">
          Solid
        </Badge>
        <Badge status variant="subtle" colorPalette="green">
          Subtle
        </Badge>
        <Badge status variant="surface" colorPalette="green">
          Surface
        </Badge>
      </Wrap>
    </Stack>
  )
}

With icon

Wrap an icon in BadgeStartIcon or BadgeEndIcon with asChild, the same way as ButtonStartIcon and ButtonEndIcon. They mark it with data-icon-start or data-icon-end, so the recipe sizes it for the badge's size and pulls it a little toward the edge, where it lines up with the status dot. Only React has these wrappers so far; in other frameworks put the attribute on the icon yourself. The icons here come from the active sprite, so they follow your own icons.

NewVerifiedExpiring

import { Badge, BadgeEndIcon, BadgeStartIcon } from "@isbatak/react-ui/badge"
import { Icon } from "@isbatak/react-ui/icon"
import { HStack } from "styled-system/jsx"

export function BadgeWithIconDemo() {
  return (
    <HStack gap="2">
      <Badge variant="solid" colorPalette="blue">
        <BadgeStartIcon asChild>
          <Icon name="star" />
        </BadgeStartIcon>
        New
      </Badge>
      <Badge variant="surface" colorPalette="green">
        <BadgeStartIcon asChild>
          <Icon name="check-circle" />
        </BadgeStartIcon>
        Verified
      </Badge>
      <Badge variant="outline" colorPalette="yellow">
        Expiring
        <BadgeEndIcon asChild>
          <Icon name="warning" />
        </BadgeEndIcon>
      </Badge>
    </HStack>
  )
}

Recipe

Variant	Values	Default
`variant`	`solid`, `subtle`, `outline`, `surface`, `plain`	`subtle`
`size`	`xs`, `sm`, `md`, `lg`	`sm`
`status`	`true`, `false`	`false`

Variable	Description
`--badge-icon-size`	The icon size, set by `size`
`--badge-icon-offset`	How far a start or end icon and the `status` dot are pulled toward the edge