Badge

Basic

Basic example of a badge.

New

const BasicComponent = () => {
  return <Badge>New</Badge>;
};

No border radius

Example of a badge without border radius.

Sale

const NoBorderRadiusComponent = () => {
  return (
    <Badge borderRadius={"$0"}>
      Sale
    </Badge>
  );
};

With Icon

You can add icons to the left, right or both sides of a badge. Use the IconLeftComponent and IconRightComponent props

Featured

Top Rated

Pro Member

const WithIconComponent = () => {
  return (
    <HStack gap="$4" flexWrap="wrap">
      {/* With left icon */}
      <Badge>
        <Badge.LeftIcon>
          <Sparkles />
        </Badge.LeftIcon>
        Featured
      </Badge>

      {/* With right icon */}
      <Badge>
        Top Rated
        <Badge.RightIcon>
          <ThumbsUp />
        </Badge.RightIcon>
      </Badge>

      {/* With icons on both sides */}
      <Badge>
        <Badge.LeftIcon>
          <Crown />
        </Badge.LeftIcon>
        Pro Member
        <Badge.RightIcon>
          <Star />
        </Badge.RightIcon>
      </Badge>
    </HStack>
  );
};

With Custom Icon Element

You can also pass your custom react elements as icons for further customization.

Premium

Exclusive

VIP Member

const WithCustomIconElementComponent = () => {
  return (
    <HStack gap="$4" flexWrap="wrap">
      {/* With left icon element */}
      <Badge>
        <Badge.LeftIcon>
          <Star size={24} color="$red.500" />
        </Badge.LeftIcon>
        Premium
      </Badge>

      {/* With right icon element */}
      <Badge>
        Exclusive
        <Badge.RightIcon>
          <Star size={24} color="$red.500" />
        </Badge.RightIcon>
      </Badge>

      {/* With icon elements on both sides */}
      <Badge>
        <Badge.LeftIcon>
          <User size={24} color="$red.500" />
        </Badge.LeftIcon>
        VIP Member
        <Badge.RightIcon>
          <Star size={24} color="$red.500" />
        </Badge.RightIcon>
      </Badge>
    </HStack>
  );
};

Size

You can change the size of a badge using the size prop. The default size is md.

Best Seller

Editor's Choice

const SizeComponent = () => {
  return (
    <HStack gap="$4">
      {/* Small badge */}
      <Badge size="sm">
        <Badge.LeftIcon>
          <TrendingUp />
        </Badge.LeftIcon>
        Best Seller
      </Badge>

      {/* Medium badge */}
      <Badge size="md">
        Editor's Choice
        <Badge.RightIcon>
          <Award />
        </Badge.RightIcon>
      </Badge>
    </HStack>
  );
};

Custom

You can customize the badge with the backgroundColor, textColor and borderColor props.

Limited Edition

const CustomComponent = () => {
  return (
    <Badge
      backgroundColor="$black"
      textColor="$red.200"
      borderColor="$red.200"
    >
      <Badge.LeftIcon>
        <Gem />
      </Badge.LeftIcon>
      Limited Edition
    </Badge>
  );
};

Override Color Mode

Use the colorMode prop to override the color mode of the badge.

Verified

const OverrideColorModeComponent = () => {
  return (
    <Badge size="sm" colorMode="dark">
      <Badge.LeftIcon>
        <BadgeCheck />
      </Badge.LeftIcon>
      Verified
    </Badge>
  );
};

Override Accent Color

Use the accentColor prop to override the accent color of the badge.

Eco-Friendly

const OverrideAccentColorComponent = () => {
  return (
    <Badge size="sm" accentColor="emerald">
      <Badge.LeftIcon>
        <Leaf />
      </Badge.LeftIcon>
      Eco-Friendly
    </Badge>
  );
};

Override Color Mode and Accent Color

You can override both the color mode and accent color of the badge using the colorMode and accentColor props.

Organic

const OverrideColorModeAndAccentColorComponent = () => {
  return (
    <Badge size="sm" colorMode="dark" accentColor="emerald">
      <Badge.LeftIcon>
        <Sprout />
      </Badge.LeftIcon>
      Organic
    </Badge>
  );
};

Group Basic

Example of a basic badge group.

React

TypeScript

Node.js

GraphQL

AWS

Docker

PostgreSQL

Redis

Kubernetes

CI/CD

Agile

const GroupBasicComponent = () => {
  return (
    <Badge.Group>
      <Badge>React</Badge>
      <Badge>TypeScript</Badge>
      <Badge>Node.js</Badge>
      ...
    </Badge.Group>
  );
};

Group With Max

You can use the max prop to limit the number of badges that are shown.

JavaScript

Python

Rust

+ 7

const GroupWithMaxComponent = () => {
  return (
    <Badge.Group max={4}>
      <Badge>JavaScript</Badge>
      <Badge>Python</Badge>
      <Badge>Go</Badge>
      ...
    </Badge.Group>
  );
};

Group With Icon

Each badge in a group can have its own icon. Use the IconLeftComponent and IconRightComponent props.

Premium

5.0 Rating

VIP Access

const GroupWithIconComponent = () => {
  return (
    <Badge.Group>
      {/* With left icon */}
      <Badge>
        <Badge.LeftIcon>
          <Crown />
        </Badge.LeftIcon>
        Premium
      </Badge>

      {/* With right icon */}
      <Badge>
        5.0 Rating
        <Badge.RightIcon>
          <Star />
        </Badge.RightIcon>
      </Badge>

      {/* With icons on both sides */}
      <Badge>
        <Badge.LeftIcon>
          <Gem />
        </Badge.LeftIcon>
        VIP Access
        <Badge.RightIcon>
          <Sparkles />
        </Badge.RightIcon>
      </Badge>
    </Badge.Group>
  );
};

Group Size

You can use the size prop to change the size of all badges in a group. The default size is md.

Hot Deal

Trending

Staff Pick

Award Winner

const GroupSizeComponent = () => {
  return (
    <VStack gap="$4">
      <Badge.Group size="sm">
        <Badge>
          <Badge.LeftIcon>
            <Flame />
          </Badge.LeftIcon>
          Hot Deal
        </Badge>
        <Badge>
          <Badge.LeftIcon>
            <TrendingUp />
          </Badge.LeftIcon>
          Trending
        </Badge>
      </Badge.Group>

      <Badge.Group size="md">
        <Badge>
          <Badge.LeftIcon>
            <Award />
          </Badge.LeftIcon>
          Staff Pick
        </Badge>
        <Badge>
          <Badge.LeftIcon>
            <Trophy />
          </Badge.LeftIcon>
          Award Winner
        </Badge>
      </Badge.Group>
    </VStack>
  );
};

Group Custom

You can use the backgroundColor, textColor and borderColor props to customize all badges in a group.

Flash Sale

50% Off

Last Chance

const GroupCustomComponent = () => {
  return (
    <Badge.Group
      backgroundColor="$black"
      textColor="$red.200"
      borderColor="$red.200"
    >
      <Badge>
        <Badge.LeftIcon>
          <Zap />
        </Badge.LeftIcon>
        Flash Sale
      </Badge>
      <Badge>
        <Badge.LeftIcon>
          <Percent />
        </Badge.LeftIcon>
        50% Off
      </Badge>
      <Badge>
        <Badge.LeftIcon>
          <Clock />
        </Badge.LeftIcon>
        Last Chance
      </Badge>
    </Badge.Group>
  );
};

Group Override Color Mode

Use the colorMode prop to override the color mode of all badges in a group.

In Stock

Free Shipping

2-Day Delivery

const GroupOverrideColorModeComponent = () => {
  return (
    <Badge.Group colorMode="dark">
      <Badge>
        <Badge.LeftIcon>
          <Package />
        </Badge.LeftIcon>
        In Stock
      </Badge>
      <Badge>
        <Badge.LeftIcon>
          <Truck />
        </Badge.LeftIcon>
        Free Shipping
      </Badge>
      <Badge>
        <Badge.LeftIcon>
          <Timer />
        </Badge.LeftIcon>
        2-Day Delivery
      </Badge>
    </Badge.Group>
  );
};

Group Override Accent Color

Use the accentColor prop to override the accent color of all badges in a group.

Sustainable

Carbon Neutral

Recycled

const GroupOverrideAccentColorComponent = () => {
  return (
    <Badge.Group accentColor="emerald">
      <Badge>
        <Badge.LeftIcon>
          <Leaf />
        </Badge.LeftIcon>
        Sustainable
      </Badge>
      <Badge>
        <Badge.LeftIcon>
          <TreeDeciduous />
        </Badge.LeftIcon>
        Carbon Neutral
      </Badge>
      <Badge>
        <Badge.LeftIcon>
          <Recycle />
        </Badge.LeftIcon>
        Recycled
      </Badge>
    </Badge.Group>
  );
};

Group Override Color Mode and Accent Color

You can override both the color mode and accent color of all badges in a group using the colorMode and accentColor props.

Vegan

Gluten-Free

Non-GMO

const GroupOverrideColorModeAndAccentColorComponent = () => {
  return (
    <Badge.Group colorMode="dark" accentColor="emerald">
      <Badge>
        <Badge.LeftIcon>
          <Vegan />
        </Badge.LeftIcon>
        Vegan
      </Badge>
      <Badge>
        <Badge.LeftIcon>
          <WheatOff />
        </Badge.LeftIcon>
        Gluten-Free
      </Badge>
      <Badge>
        <Badge.LeftIcon>
          <ShieldCheck />
        </Badge.LeftIcon>
        Non-GMO
      </Badge>
    </Badge.Group>
  );
};

Basic​

No border radius​

With Icon​

With Custom Icon Element​

Size​

Custom​

Override Color Mode​

Override Accent Color​

Override Color Mode and Accent Color​

Group Basic​

Group With Max​

Group With Icon​

Group Size​

Group Custom​

Group Override Color Mode​

Group Override Accent Color​

Group Override Color Mode and Accent Color​