Badge

The Badge component displays a small label or indicator attached to another element. It can be used to show counts, statuses, or other short pieces of information.

import Badge from "rocksolidjs/Badge";
import IconButton from "rocksolidjs/IconButton";

export default function Example() {
  return (
    <Badge badgeContent={5}>
      <IconButton>
        <NotificationIcon />
      </IconButton>
    </Badge>
  );
};

const NotificationIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none" />
    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      <path d="M12.721 5.003L11.255 5c-3.344-.008-6.247 2.709-6.27 6v3.79c0 .79-.1 1.561-.531 2.218l-.287.438C3.73 18.11 4.2 19 4.985 19h14.03c.785 0 1.254-.89.818-1.554l-.287-.438c-.43-.657-.531-1.429-.531-2.219v-3.788c-.04-3.292-2.95-5.99-6.294-5.998M15 19a3 3 0 1 1-6 0" />
      <path d="M12 2a2 2 0 0 1 2 2v1h-4V4a2 2 0 0 1 2-2" />
    </g>
  </svg>
);

Examples

Colors

Use the color prop to communicate the semantic meaning of the badge.

import Badge from "rocksolidjs/Badge";
import IconButton from "rocksolidjs/IconButton";

export default function Example() {
  return (
    <div class="flex gap-4">
      <Badge badgeContent={1} color="default">
        <IconButton>
          <NotificationIcon />
        </IconButton>
      </Badge>
      <Badge badgeContent={2} color="success">
        <IconButton>
          <NotificationIcon />
        </IconButton>
      </Badge>
      <Badge badgeContent={3} color="warning">
        <IconButton>
          <NotificationIcon />
        </IconButton>
      </Badge>
      <Badge badgeContent={4} color="info">
        <IconButton>
          <NotificationIcon />
        </IconButton>
      </Badge>
      <Badge badgeContent={5} color="error">
        <IconButton>
          <NotificationIcon />
        </IconButton>
      </Badge>
    </div>
  );
}

const NotificationIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none" />
    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      <path d="M12.721 5.003L11.255 5c-3.344-.008-6.247 2.709-6.27 6v3.79c0 .79-.1 1.561-.531 2.218l-.287.438C3.73 18.11 4.2 19 4.985 19h14.03c.785 0 1.254-.89.818-1.554l-.287-.438c-.43-.657-.531-1.429-.531-2.219v-3.788c-.04-3.292-2.95-5.99-6.294-5.998M15 19a3 3 0 1 1-6 0" />
      <path d="M12 2a2 2 0 0 1 2 2v1h-4V4a2 2 0 0 1 2-2" />
    </g>
  </svg>
);

Position

Use the position prop to control where the badge appears relative to its content.

import Badge from "rocksolidjs/Badge";
import IconButton from "rocksolidjs/IconButton";

export default function Example() {
  return (
    <div class="flex gap-4">
      <Badge
        badgeContent={1}
        position={{ x: "left", y: "top" }}
      >
        <IconButton>
          <NotificationIcon />
        </IconButton>
      </Badge>
      <Badge
        badgeContent={2}
        position={{ x: "right", y: "top" }}
      >
        <IconButton>
          <NotificationIcon />
        </IconButton>
      </Badge>
      <Badge
        badgeContent={3}
        position={{ x: "left", y: "bottom" }}
      >
        <IconButton>
          <NotificationIcon />
        </IconButton>
      </Badge>
      <Badge
        badgeContent={4}
        position={{ x: "right", y: "bottom" }}
      >
        <IconButton>
          <NotificationIcon />
        </IconButton>
      </Badge>
    </div>
  );
}

const NotificationIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none" />
    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
      <path d="M12.721 5.003L11.255 5c-3.344-.008-6.247 2.709-6.27 6v3.79c0 .79-.1 1.561-.531 2.218l-.287.438C3.73 18.11 4.2 19 4.985 19h14.03c.785 0 1.254-.89.818-1.554l-.287-.438c-.43-.657-.531-1.429-.531-2.219v-3.788c-.04-3.292-2.95-5.99-6.294-5.998M15 19a3 3 0 1 1-6 0" />
      <path d="M12 2a2 2 0 0 1 2 2v1h-4V4a2 2 0 0 1 2-2" />
    </g>
  </svg>
);

The position prop accepts an x value of left or right and a y value of top or bottom.

Overlap

Use the overlap prop to adjust the badge position based on the shape of the element it overlaps.

import Avatar from "rocksolidjs/Avatar";
import Badge from "rocksolidjs/Badge";

export default function Example() {
  return (
    <div class="w-full flex justify-center gap-4">
      <Badge
        badgeContent={5}
        overlap="circle"
      >
        <Avatar
          src="https://i.pravatar.cc/150?img=1"
          alt="User avatar"
        />
      </Badge>
      <Badge
        badgeContent={5}
        overlap="rect"
      >
        <Avatar
          src="https://i.pravatar.cc/150?img=1"
          alt="User avatar"
          rounded="none"
        />
      </Badge>
    </div>
  );
}

The available overlap values are:

circle — Positions the badge for circular content.
rect — Positions the badge for rectangular content.

Status

A Badge can be used without badgeContent to indicate the status of an element, such as whether a user is online, busy, or offline.

Use the class prop and slotProps to customize the Badge and its badge element.

import Avatar from "rocksolidjs/Avatar";
import Badge from "rocksolidjs/Badge";

export default function Example() {
  return (
    <div class="w-full flex justify-center gap-4">
      <Badge
        overlap="circle"
        color="success"
      >
        <Avatar
          src="https://i.pravatar.cc/150?img=12"
          alt="Online user"
        />
      </Badge>
      <Badge
        overlap="circle"
        slotProps={{
          badge: {
            class: "bg-yellow-500 dark:bg-yellow-400",
          },
        }}
      >
        <Avatar
          src="https://i.pravatar.cc/150?img=13"
          alt="Busy user"
        />
      </Badge>
      <Badge
        overlap="circle"
        slotProps={{
          badge: {
            class: "bg-gray-500 dark:bg-gray-400",
          },
        }}
      >
        <Avatar
          src="https://i.pravatar.cc/150?img=14"
          alt="Offline user"
        />
      </Badge>
    </div>
  );
}

Accessibility

Keep badge content short and meaningful.
Do not rely on color alone to communicate important information.
Use text or numbers that clearly communicate the badge’s purpose.
Ensure badges have sufficient contrast against their background.
When the badge communicates important status information, make sure that information is also available in an accessible text form.

API

Badge

The Badge component supports custom content, positioning, colors, overlap styles, and badge slot customization.

Prop	Type	Required	Default	Description
badgeContent	`JSXElement`	No	—	Content displayed inside the badge. When omitted, the Badge can be used as a visual status indicator.
class	`string`	No	—	Custom CSS class applied to the Badge.
color	`"default" \| "success" \| "warning" \| "info" \| "error"`	No	`"default"`	Controls the semantic color of the badge.
overlap	`"circle" \| "rect"`	No	`"circle"`	Controls the badge positioning based on the shape of the element it overlaps.
position	`{ x: "left" \| "right"; y: "top" \| "bottom" }`	No	`{ x: "right", y: "top" }`	Controls the horizontal and vertical position of the badge.
slotProps	`{ badge?: object }`	No	—	Provides props for customizing the Badge slots. `badge` — Props for the badge slot.

Avatar — Use Badge to display status or counts alongside an avatar.
Chip — Use Chip for standalone labels or statuses.

Badge

Examples

Colors

Position

Overlap

Status

Accessibility

API

Badge

Related Components