Pill

Pill displays a compact label with optional leading icon, avatar, and close button. PillGroup arranges multiple pills with wrap, single-line, or overflow layouts.

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

import '@infinitibit_gmbh/theme-default/theme.css';
import '@infinitibit_gmbh/ui/styles.css';

import { Pill, PillGroup } from '@infinitibit_gmbh/ui';

export function Example() {
  return (
    <PillGroup>
      <Pill label="React" onRemove={() => removePill('React')} />
      <Pill label="TypeScript" onRemove={() => removePill('TypeScript')} />
    </PillGroup>
  );
}

Status variants

Use status to communicate semantic meaning — default, link (selected/active), or error.

PillGroup layouts

PillGroup supports three layouts: wrap (default), single-line (horizontal scroll), and overflow (hide beyond maxVisible with a +N count badge).

API

Pill

Prop	Type	Default	Description
label	string	—	Visible text (required)
status	'default' | 'link' | 'error'	'default'	Visual status variant
onRemove	() => void	—	Shows close button; calls this when clicked
leadingIcon	ReactNode	—	Icon rendered before the label
avatar	ReactNode	—	Avatar rendered before the leading icon
disabled	boolean	—	Disables interaction; sets aria-disabled

All other <span> props are forwarded.

PillGroup

Prop	Type	Default	Description
layout	'wrap' | 'single-line' | 'overflow'	'wrap'	How pills are arranged
maxVisible	number	—	Max pills shown in overflow layout before +N

All other <div> props are forwarded.

Accessibility

• The close button renders with aria-label="Remove {label}" so screen readers announce the action.
• Disabled pills receive aria-disabled="true"; the close button is disabled to prevent interaction.
• All interactive elements are reachable by keyboard.