BadgeOverflow

Stable
WCAG 2.2 evidence
RTL

The "+N" pill that stands in for the badges a row has no room for. The count is real text, so it can be translated, zoomed and selected. For assistive technology it is read as "and 4 more" (or your label) instead of "plus 4", and the visible "+4" is hidden from them so nothing is read twice (WCAG 1.1.1, 1.3.1, 1.4.1). Presentational: renders in React Server Components, without React Aria. Consumer duties (WCAG 1.4.13, 4.1.2): this is a summary, not a control, so do not hide values that people must act on; put the hidden values in label when they matter. To show them on hover and focus, wrap the badge in a TooltipTrigger and React Aria's Focusable (the badge forwards its ref and props), with a short list in the Tooltip; the tooltip is a convenience for sighted people and must not be the only place the values appear. Do not use it where all values must be visible.

import { BadgeOverflow } from "@nexera-ui/react";

Loading example…

6
examples: 3
props: 2
live controls: 1
platform: 8
WCAG criteria: 0
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

size

label

Generated code

import { BadgeOverflow } from "@nexera-ui/react";

<BadgeOverflow />

Examples 5

The same examples as Storybook, rendered live. Open Code to copy one.

After badges

At the end of a row of badges, in the size of the badges. The hidden values go in label so nobody loses them.

Loading example…

app.tsx

import { Badge, BadgeOverflow } from "@nexera-ui/react";

const departments = ["Engineering", "Design", "Finance", "Legal", "People", "Operations"] as const;

export function AfterBadges() {
  return (
    <ul className="m-0 flex max-w-sm list-none flex-wrap items-center gap-2 p-0">
      {departments.slice(0, 3).map((name) => (
        <li key={name}>
          <Badge label={name} tone="brand" variant="soft" size="md" dot={false} />
        </li>
      ))}
      <li>
        <BadgeOverflow
          size="md"
          count={departments.length - 3}
          label={`and {count} more: ${departments.slice(3).join(", ")}`}
        />
      </li>
    </ul>
  );
}

With tooltip

Showing the hidden values on hover and focus: wrap the badge in TooltipTrigger and React Aria's Focusable. The values are also in the badge's label, so the tooltip is only a convenience for sighted people.

Loading example…

app.tsx

import { Focusable } from "react-aria-components";
import { Badge, BadgeOverflow, Tooltip, TooltipTrigger } from "@nexera-ui/react";

const departments = ["Engineering", "Design", "Finance", "Legal", "People", "Operations"] as const;

export function WithTooltip() {
  return (
    <div className="flex items-center gap-2 pt-12">
      <Badge label="Engineering" tone="brand" dot={false} />
      <TooltipTrigger>
        <Focusable>
          <BadgeOverflow
            count={departments.length - 1}
            label={`and {count} more: ${departments.slice(1).join(", ")}`}
          />
        </Focusable>
        <Tooltip placement="bottom">{departments.slice(1).join(", ")}</Tooltip>
      </TooltipTrigger>
    </div>
  );
}

Translated label

The spoken text is translatable; the visible "+N" stays. German here.

Loading example…

app.tsx

import { Badge, BadgeOverflow } from "@nexera-ui/react";

export function TranslatedLabel() {
  return (
    <div lang="de" className="flex items-center gap-2">
      <Badge label="Technik" tone="brand" dot={false} />
      <BadgeOverflow count={3} label="und {count} weitere: Design, Finanzen, Recht" />
    </div>
  );
}

Long content

A text count is shown as written, and wraps in a narrow container instead of widening the page.

Loading example…

app.tsx

import { BadgeOverflow } from "@nexera-ui/react";

const departments = ["Engineering", "Design", "Finance", "Legal", "People", "Operations"] as const;

export function LongContent() {
  return (
    <div className="max-w-40">
      <BadgeOverflow
        count="+4 more departments and teams"
        label="and 4 more departments and teams"
      />
    </div>
  );
}

Right to left

Right-to-left: the badges mirror and the count keeps its left-to-right "+N".

Loading example…

app.tsx

import { Badge, BadgeOverflow } from "@nexera-ui/react";

export function RightToLeft() {
  return (
    <ul dir="rtl" lang="ar" className="m-0 flex list-none flex-wrap items-center gap-2 p-0">
      <li>
        <Badge label="الهندسة" tone="brand" dot={false} />
      </li>
      <li>
        <Badge label="التصميم" tone="brand" dot={false} />
      </li>
      <li>
        <BadgeOverflow count={4} label="و{count} أخرى" />
      </li>
    </ul>
  );
}

Props 3

Press "Try it" on a card to load that prop into the playground.

count*Nexera

string | number

How many badges are not shown. A number is shown as "+N" and read as "and N more" (see label); a string is shown as it is, for example "+99" or "+4 more", and read as written unless you pass label.

sizeNexera

"sm" | "md" | "lg"

Padding and type: 20, 22 or 30 px tall for a one-line count; use the size of the badges beside it.

labelNexera

string

Text for assistive technology that replaces the visible count, with {count} standing for the number: "and {count} more". Add the hidden values to it so they are not lost ("and 3 more: Design, Finance, Legal"). Translate it for your locale.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

5 direct · 3 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.3.2Meaningful SequenceLevel A · supporting test
1.4.10ReflowLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
1.4.13Content on Hover or FocusLevel AA · tested directly
2.1.1KeyboardLevel A · tested directly
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<BadgeOverflow className="shadow-sm" />

Used in blocks

No block uses BadgeOverflow yet.

Theme studio

BadgeOverflow

Try every prop. Copy the code.

Examples 5

After badges

With tooltip

Translated label

Long content

Right to left

Props 3

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components