Badge

Badge is a small status indicator for displaying counts, labels, and categories.

Open in Storybook

Import

import { Badge } from "@tosui/react";

Basic usage

Preview

Code

<Badge>Default</Badge>

Color schemes

Preview

GrayPrimaryAccentSuccessWarningErrorInfo

Code

<HStack gap={2} wrap>
  <Badge colorScheme="gray">Gray</Badge>
  <Badge colorScheme="primary">Primary</Badge>
  <Badge colorScheme="accent">Accent</Badge>
  <Badge colorScheme="success">Success</Badge>
  <Badge colorScheme="warning">Warning</Badge>
  <Badge colorScheme="error">Error</Badge>
  <Badge colorScheme="info">Info</Badge>
</HStack>

Variants

Preview

SubtleSubtleSubtle

SolidSolidSolid

Code

<VStack gap={4}>
  <HStack gap={2}>
    <Badge variant="subtle" colorScheme="primary">Subtle</Badge>
    <Badge variant="subtle" colorScheme="success">Subtle</Badge>
    <Badge variant="subtle" colorScheme="error">Subtle</Badge>
  </HStack>
  <HStack gap={2}>
    <Badge variant="solid" colorScheme="primary">Solid</Badge>
    <Badge variant="solid" colorScheme="success">Solid</Badge>
    <Badge variant="solid" colorScheme="error">Solid</Badge>
  </HStack>
</VStack>

Sizes

Preview

SmallMedium

Code

<HStack gap={2} align="center">
  <Badge size="sm">Small</Badge>
  <Badge size="md">Medium</Badge>
</HStack>

Common patterns

Status indicator

Preview

ActivePendingInactive

Code

<HStack gap={4}>
  <Badge colorScheme="success">Active</Badge>
  <Badge colorScheme="warning">Pending</Badge>
  <Badge colorScheme="error">Inactive</Badge>
</HStack>

Count badge

Preview

599+

Code

<HStack gap={4}>
  <Badge variant="solid" colorScheme="primary">5</Badge>
  <Badge variant="solid" colorScheme="error">99+</Badge>
</HStack>

Tags

<HStack gap={2}>
  <Badge>React</Badge>
  <Badge>TypeScript</Badge>
  <Badge>CSS Modules</Badge>
</HStack>

With text

<HStack gap={2} align="center">
  <Text>Order Status:</Text>
  <Badge colorScheme="success">Shipped</Badge>
</HStack>

Props reference

Prop	Type	Default	Description
colorScheme	"gray" | "primary" | "accent" | "success" | "warning" | "error" | "info"	"gray"	Color scheme
variant	"solid" | "subtle"	"subtle"	Visual variant
size	"sm" | "md"	"md"	Badge size
className	string	-	Additional CSS class
children	ReactNode	-	Badge content

TypeScript

import { Badge, type BadgeColorScheme, type BadgeVariant, type BadgeSize, type BadgeProps } from "@tosui/react";