Badge

A small red count.

Overview

A count of unread or pending things that sits on an icon button.

On icon

Do
import { IconButton } from "@hackcove/ui";

<IconButton label="Alerts" badge={3}>
  <svg viewBox="0 0 20 20" width="20" height="20" fill="currentColor" aria-hidden="true">
    <path
      d="M10 2a5 5 0 0 0-5 5v2.6c0 .5-.2 1-.5 1.4L3.3 12.5a.75.75 0 0 0 .55 1.25
      h12.3a.75.75 0 0 0 .55-1.25L15.5 11a2 2 0 0 1-.5-1.4V7a5 5 0 0 0-5-5Z
      m-1.9 13.5a2 2 0 0 0 3.8 0H8.1Z"
    />
  </svg>
</IconButton>
badge on an IconButton pins the count to the corner and adds it to the button's name ("Alerts, 3").
Don't
3
import { Cluster, IconButton, Pill } from "@hackcove/ui";

<Cluster>
  <IconButton label="Alerts">
    <svg viewBox="0 0 20 20" width="20" height="20" fill="currentColor" aria-hidden="true">
      <path
        d="M10 2a5 5 0 0 0-5 5v2.6c0 .5-.2 1-.5 1.4L3.3 12.5a.75.75 0 0 0 .55 1.25
        h12.3a.75.75 0 0 0 .55-1.25L15.5 11a2 2 0 0 1-.5-1.4V7a5 5 0 0 0-5-5Z
        m-1.9 13.5a2 2 0 0 0 3.8 0H8.1Z"
      />
    </svg>
  </IconButton>
  <Pill tone="red" round>
    3
  </Pill>
</Cluster>
A Pill beside the button is not pinned to it and a screen reader never hears it as part of the button. Use badge.

Count

Do
799+
import { Badge, Cluster } from "@hackcove/ui";

<Cluster>
  <Badge count={7} />
  <Badge count={120} />
</Cluster>
On its own a Badge is a count; above 99 it reads 99+.

Usage

  • On an icon, give the IconButton a badge count; it pins the Badge to the corner and puts the count in the button's name.
  • A count above 99 reads 99+.
  • Show a Badge only when there is something to count: a count of 0 still draws a 0, so leave it out instead.
  • A tinted label with words in it is a Pill, not a Badge.

Accessibility

  • A Badge is a <span> with the number as its text.
  • Inside an IconButton, the Badge is aria-hidden and the count is part of the button's aria-label and title ("Alerts, 3"), so it is announced once.
  • corner pins the Badge to its nearest positioned parent; IconButton already provides one.

API

Badge

A small red count, 10px, for sitting on an icon. corner pins it to the top-right corner of its relative parent (wrap the icon button and the badge in a relative inline-flex element); a count above 99 reads 99+. Name the control it sits on (aria-label on the button) for a screen reader. An IconButton takes badge itself and does all of this.

corner
Type
boolean
Default
false
count required
Type
number