Server Component · 0 KB client JS

Badge

A small status label in the standard variant and color-scheme families.

ActivePendingFailedBetaDefault

"use client";

import { Badge, HStack } from "astralis-ui";

export function BadgeDemo() {
  return (
    <HStack gap="2" wrap="wrap" justifyContent="center">
      <Badge colorScheme="green" variant="solid">Active</Badge>
      <Badge colorScheme="yellow">Pending</Badge>
      <Badge colorScheme="red" variant="surface">Failed</Badge>
      <Badge colorScheme="blue" variant="outline">Beta</Badge>
      <Badge>Default</Badge>
    </HStack>
  );
}

Active

Label

variant

colorScheme

size

import { Badge } from "astralis-ui";

<Badge>Active</Badge>

Import#

import { Badge } from "astralis-ui";

Variants and sizes#

variants

solidsubtlesurfaceoutline

sizes

xssmmdlg

"use client";

import { Badge, Text, HStack, VStack } from "astralis-ui";

const variants = ["solid", "subtle", "surface", "outline"] as const;
const sizes = ["xs", "sm", "md", "lg"] as const;

export function BadgeVariants() {
  return (
    <VStack gap="4" alignItems="start">
      <VStack gap="1" alignItems="start">
        <Text as="span" size="xs" color="subtle">variants</Text>
        <HStack gap="2">
          {variants.map((variant) => (
            <Badge key={variant} variant={variant} colorScheme="brand">{variant}</Badge>
          ))}
        </HStack>
      </VStack>
      <VStack gap="1" alignItems="start">
        <Text as="span" size="xs" color="subtle">sizes</Text>
        <HStack gap="2" alignItems="center">
          {sizes.map((size) => (
            <Badge key={size} size={size} colorScheme="teal">{size}</Badge>
          ))}
        </HStack>
      </VStack>
    </VStack>
  );
}

Badge or Tag?#

The two render nearly the same chip (Badge is pill-shaped, Tag is rounded), so the radius won't tell you which to reach for. The meaning does:

Badge is a state the thing is in: Active, Beta, Failed, 3 unread. Read-only, which is why it has no close button and no group.
Tag is a label the thing carries: a topic, a category, a filter. That's why it can be removed, selected and grouped.

Pick by meaning, not by shape: a reader who sees Badge should know the chip describes status without having to check what it says. For counts anchored to a corner, combine a Badge with Float.

Props#

Prop	Type	Default	Description
`variant`	`"solid" \| "subtle" \| "surface" \| "outline"`	`"subtle"`	Visual style. surface is the bordered sibling of subtle.
`colorScheme`	`all 15 schemes`	`"gray"`	Hue the badge paints with, via the accent channel.
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"sm"`	Text and padding scale.