The Badge component is used to display small pieces of information, such as notification counts or status indicators, typically attached to another UI element.

Anatomy

Usage

Basic Example

A basic badge can display content (like a number) attached to an element, or act as a simple status dot.

Show code

React

import { PlusBadge, PlusAvatar } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusBadge content="5">
        <PlusAvatar image="https://i.pravatar.cc/50" alt="User Avatar">
        </PlusAvatar>
      </PlusBadge>
      <PlusBadge status="success">
        <PlusAvatar image="https://i.pravatar.cc/50" alt="User Avatar">
        </PlusAvatar>
      </PlusBadge>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-badge content="5">
      <plus-avatar image="https://i.pravatar.cc/50" alt="User Avatar">
      </plus-avatar>
    </plus-badge>
    <plus-badge status="success">
      <plus-avatar image="https://i.pravatar.cc/50" alt="User Avatar">
      </plus-avatar>
    </plus-badge>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-badge content="5">
    <plus-avatar image="https://i.pravatar.cc/50" alt="User Avatar">
    </plus-avatar>
  </plus-badge>
  <plus-badge status="success">
    <plus-avatar image="https://i.pravatar.cc/50" alt="User Avatar">
    </plus-avatar>
  </plus-badge>
</template>

Svelte

<plus-badge content="5">
  <plus-avatar image="https://i.pravatar.cc/50" alt="User Avatar">
  </plus-avatar>
</plus-badge>
<plus-badge status="success">
  <plus-avatar image="https://i.pravatar.cc/50" alt="User Avatar">
  </plus-avatar>
</plus-badge>

HTML

<plus-badge content="5">
  <plus-avatar image="https://i.pravatar.cc/50" alt="User Avatar">
  </plus-avatar>
</plus-badge>
<plus-badge status="success">
  <plus-avatar image="https://i.pravatar.cc/50" alt="User Avatar">
  </plus-avatar>
</plus-badge>

Status

Use the status prop to change the color variant: default, primary, success, warning, danger, info.

Show code

React

import { PlusBadge, PlusAvatar } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusBadge status="default" content="1">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
      <PlusBadge status="primary" content="1">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
      <PlusBadge status="success" content="1">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
      <PlusBadge status="warning" content="1">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
      <PlusBadge status="danger" content="1">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
      <PlusBadge status="info" content="1">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-badge status="default" content="1">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
    <plus-badge status="primary" content="1">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
    <plus-badge status="success" content="1">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
    <plus-badge status="warning" content="1">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
    <plus-badge status="danger" content="1">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
    <plus-badge status="info" content="1">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-badge status="default" content="1">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
  <plus-badge status="primary" content="1">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
  <plus-badge status="success" content="1">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
  <plus-badge status="warning" content="1">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
  <plus-badge status="danger" content="1">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
  <plus-badge status="info" content="1">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
</template>

Svelte

<plus-badge status="default" content="1">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge status="primary" content="1">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge status="success" content="1">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge status="warning" content="1">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge status="danger" content="1">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge status="info" content="1">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>

HTML

<plus-badge status="default" content="1">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge status="primary" content="1">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge status="success" content="1">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge status="warning" content="1">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge status="danger" content="1">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge status="info" content="1">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>

Size

Control the badge size with the size prop: sm, md (default), lg.

Show code

React

import { PlusBadge, PlusAvatar } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusBadge size="sm" content="S">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
      <PlusBadge size="sm">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
      <PlusBadge size="md" content="S">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
      <PlusBadge size="md">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
      <PlusBadge size="lg" content="S">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
      <PlusBadge size="lg">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-badge size="sm" content="S">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
    <plus-badge size="sm">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
    <plus-badge size="md" content="S">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
    <plus-badge size="md">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
    <plus-badge size="lg" content="S">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
    <plus-badge size="lg">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-badge size="sm" content="S">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
  <plus-badge size="sm">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
  <plus-badge size="md" content="S">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
  <plus-badge size="md">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
  <plus-badge size="lg" content="S">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
  <plus-badge size="lg">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
</template>

Svelte

<plus-badge size="sm" content="S">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge size="sm">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge size="md" content="S">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge size="md">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge size="lg" content="S">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge size="lg">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>

HTML

<plus-badge size="sm" content="S">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge size="sm">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge size="md" content="S">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge size="md">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge size="lg" content="S">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge size="lg">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>

Placement & Offset

Use the orientation prop to place the badge at different corners (top-right (default), top-left, bottom-right, bottom-left) relative to the element in the default slot. Use the offset prop (format: “x,y”) to fine-tune the position.

Show code

React

import { PlusBadge, PlusAvatar } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusBadge orientation="top-left" content="TL">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
      <PlusBadge orientation="bottom-left" offset="-5px,5px" content="Offset">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
      <PlusBadge orientation="bottom-right" content="BR">
        <PlusAvatar image="https://i.pravatar.cc/50">
        </PlusAvatar>
      </PlusBadge>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-badge orientation="top-left" content="TL">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
    <plus-badge orientation="bottom-left" offset="-5px,5px" content="Offset">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
    <plus-badge orientation="bottom-right" content="BR">
      <plus-avatar image="https://i.pravatar.cc/50">
      </plus-avatar>
    </plus-badge>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-badge orientation="top-left" content="TL">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
  <plus-badge orientation="bottom-left" offset="-5px,5px" content="Offset">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
  <plus-badge orientation="bottom-right" content="BR">
    <plus-avatar image="https://i.pravatar.cc/50">
    </plus-avatar>
  </plus-badge>
</template>

Svelte

<plus-badge orientation="top-left" content="TL">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge orientation="bottom-left" offset="-5px,5px" content="Offset">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge orientation="bottom-right" content="BR">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>

HTML

<plus-badge orientation="top-left" content="TL">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge orientation="bottom-left" offset="-5px,5px" content="Offset">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>
<plus-badge orientation="bottom-right" content="BR">
  <plus-avatar image="https://i.pravatar.cc/50">
  </plus-avatar>
</plus-badge>

Visual Sections

Layout & Spacing

Light & Dark Mode

Accessibility (a11y)

• Keyboard Behavior: Badges are typically non-interactive and do not receive focus.
• Screen Reader:
  • The component uses role="status" and aria-live="polite" to ensure that badge content (especially counts or status changes) is announced by screen readers.
  • When a badge represents critical information (e.g., “Offline”), ensure the surrounding context or the element the badge is attached to provides sufficient information. For purely decorative badges or status dots where the meaning is clear from context (e.g., a green dot next to “Online”), explicit labeling might not be necessary, but consider if additional aria-label or aria-describedby on the associated element could improve clarity.
• Required Developer Actions:
  • If the badge conveys important status information not otherwise available textually (e.g., a red dot indicating an error without accompanying text), provide an accessible label for the element the badge is associated with, or use visually hidden text within the host element to describe the badge’s meaning.

API Reference

Properties

Name	Type	Default	Description	Required
status	`‘default'	'primary'	'success'	'warning'
size	`‘sm'	'md'	'lg’`	'md'
orientation	`‘top-left'	'top-right'	'bottom-left'	'bottom-right'
offset	[string, string] (parsed from “x,y”)	undefined	Fine-tune position with x,y offset (e.g., “5px,-2px”).	No
content	string	undefined	Text/number content for the badge (alternative to slot).	No

Slots

Name	Description
(default)	The element the badge is attached to (anchor element).
badge-content	The content displayed inside the badge (overrides content prop).

CSS Shadow Parts

Part	Description
badge	The main badge container element.

CSS Custom Properties

Name	Description
--text-color	Badge text color.
--border-color	Badge border color.
--bg-default	Badge background color.

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective