Badge

A short label for status, counts or categories.

React, Vue, Solid, and Svelte

SourceRecipe
SolidSubtleOutlineSurface

A span styled with the badge recipe. Pick a variant and a size, and set colorPalette to change its color.

Usage

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

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