Badge

Result

Loading...

Live Editor

<Badge>Badge</Badge>

Appearance

Result

Loading...

Live Editor

const appearances = ["solid", "faded", "outline", "ghost", "text"];

render(
  <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
    {appearances.map((appearance) => (
      <Badge key={appearance} appearance={appearance}>
        {appearance}
      </Badge>
    ))}
  </div>
);

Variant

Result

Loading...

Live Editor

const variants = [
  "primary",
  "secondary",
  "neutral",
  "danger",
  "warning",
  "success",
  "dark",
  "light",
];

render(
  <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
    {variants.map((variant) => (
      <Badge key={variant} variant={variant}>
        {variant}
      </Badge>
    ))}
  </div>
);

Size

Result

Loading...

Live Editor

const sizes = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl"];

render(
  <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
    {sizes.map((size) => (
      <Badge key={size} size={size}>
        {size}
      </Badge>
    ))}
  </div>
);

Shape

Result

Loading...

Live Editor

const shapes = ["rounded", "circular", "square"];

render(
  <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
    {shapes.map((shape) => (
      <Badge key={shape} shape={shape}>
        {shape}
      </Badge>
    ))}
  </div>
);

Fixed Ratio

When just using icons, you can set the fixedRatio prop to make sure the badge's width and height are equal.

Result

Loading...

Live Editor

<div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
  <Badge shape="circular" variant="success" fixedRatio>
    <IconCheck />
  </Badge>
  <Badge shape="rounded" fixedRatio>
    <IconBell />
  </Badge>
  <Badge shape="square" variant="warning" fixedRatio>
    <IconClock />
  </Badge>
</div>

Dots

When no content is provided, the badge renders as just a shape with color.

Result

Loading...

Live Editor

<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
  <Badge shape="circular" variant="success" />
  <Badge shape="rounded" />
  <Badge shape="square" variant="warning" />
</div>

Slots

Content can be added to the start and end of the badge using the slotStart and slotEnd props.

Result

Loading...

Live Editor

// Icons from https://tabler.io/docs/icons/react
<div style={{ display: "flex", gap: "10px" }}>
  <Badge slotEnd={<IconArrowRight size={20} />}>With icon</Badge>
  <Badge slotStart="😀">With Emoji</Badge>
  <Badge slotStart="'Slot Start'" slotEnd="'Slot End'">
    With Text
  </Badge>
</div>

Numbers and Counters

Setting the isNumeric prop adds negative left/right margin to the children so the Badge is more circular when there is a single digit.

Result

Loading...

Live Editor

<div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
  <Badge isNumeric>5</Badge>
  <Badge variant="danger" isNumeric>
    99+
  </Badge>
  <Badge variant="success" isNumeric>
    12
  </Badge>
  <Badge variant="warning" isNumeric>
    1
  </Badge>
  <Badge variant="dark" isNumeric>
    100
  </Badge>
  <Badge variant="light" isNumeric>
    1,100
  </Badge>
</div>

Positioning

Badges can be absolutely positioned relative to their parent container using the position prop.

Result

Loading...

Live Editor

const positions = [
  "top",
  "top-right",
  "right",
  "bottom-right",
  "bottom",
  "bottom-left",
  "left",
  "top-left",
];

render(
  <div style={{ display: "flex", gap: "30px", alignItems: "center" }}>
    {positions.map((position) => (
      <Button key={position}>
        Button
        <Badge position={position} variant="danger" fixedRatio size="sm">
          3
        </Badge>
      </Button>
    ))}
  </div>
);

You can also use the --inset suffix to position the badge further inside the corner of the parent. This can be helpful when the parent has rounded corners.

Result

Loading...

Live Editor

const positions = [
  "top-right--inset",
  "bottom-right--inset",
  "bottom-left--inset",
  "top-left--inset",
];

render(
  <div style={{ display: "flex", gap: "30px", alignItems: "center" }}>
    {positions.map((position) => (
      <Button key={position} shape="circular">
        Button
        <Badge position={position} variant="danger" fixedRatio size="sm">
          3
        </Badge>
      </Button>
    ))}
  </div>
);

Show Outline

The showOutline prop adds a white outline to help it visually cut into the shape it is over. The color of the outline can be customized with the --tipTop-Badge--showOutline__boxShadow CSS variable.

Result

Loading...

Live Editor

<div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
  <Button>
    Button
    <Badge
      position="top-right--inset"
      variant="success"
      isNumeric
      size="sm"
      showOutline
    >
      3
    </Badge>
  </Button>
  <Button shape="circular">
    Button
    <Badge position="top-right--inset" variant="danger" size="xs" showOutline />
  </Button>
</div>

Props

CSS Variables

Root

Variable	Value
--tipTop-Badge__borderWidth	1px
--tipTop-Badge__borderRadius	var(--tipTop__borderRadius--normal)
--tipTop-Badge__fontSize	var(--tipTop__fontSize--sm)
--tipTop-Badge__fontWeight	var(--tipTop__fontWeight--medium)
--tipTop-Badge__lineHeight	1
--tipTop-Badge__minHeight	1.25rem
--tipTop-Badge__minWidth	1.25rem
--tipTop-Badge__paddingBlock	var(--tipTop__space--1)
--tipTop-Badge__paddingInline	var(--tipTop__space--2)
--tipTop-Badge__display	inline-flex
--tipTop-Badge__alignItems	center
--tipTop-Badge__justifyContent	center
--tipTop-Badge__gap	var(--tipTop__space--1)
--tipTop-Badge__transition	background-color 0.15s ease-in-out, color 0.15s ease-in-out
--tipTop-Badge__textAlign	center
--tipTop-Badge__whiteSpace	nowrap

Show Outline

Variable	Value
--tipTop-Badge--showOutline__boxShadow	0 0 0 2px #fff

Position

Variable	Value
--tipTop-Badge--position__position	absolute
--tipTop-Badge--position__zIndex	10
--tipTop-Badge--position__transform	translate(50%, -50%)

Variants

faded

change the background color

Variable	Value
--tipTop-Badge--faded__bgColorMix-colorSpace	srgb
--tipTop-Badge--faded__bgColorMix-percent	20%
--tipTop-Badge--faded__bgColorMix-blendColor	#fff

Darken the text color over a faded background

Variable	Value
--tipTop-Badge--faded__textColorMix-colorSpace	srgb
--tipTop-Badge--faded__textColorMix-percent	65%
--tipTop-Badge--faded__textColorMix-blendColor	#000

Slot

Variable	Value
--tipTop-Badge-slot__display	inline-flex
--tipTop-Badge-slot__alignItems	center
--tipTop-Badge-slot__justifyContent	center

Slot Start

Variable	Value
--tipTop-Badge-slotStart__marginInlineEnd	var(--tipTop__space--1)

Slot End

Variable	Value
--tipTop-Badge-slotEnd__marginInlineStart	var(--tipTop__space--1)

Children

Variable	Value
--tipTop-Badge-children__display	inline-flex
--tipTop-Badge-children__alignItems	center
--tipTop-Badge-children__justifyContent	center