Pill

atoms

Toggle pill used in tab groups. Active state has white background + card shadow. Pressed state mirrors selected tab.

ARIA Role: tab (when in tablist) | button (otherwise)

Demo

Demo for Pill (atoms)

Toggle pill used in tab groups. Active state has white background + card shadow. Pressed state mirrors selected tab.

Props

Prop	Type	Required	Default
`children`	`React.ReactNode`	Yes	`—`
`pressed`	`boolean`	No	`False`
`selected`	`boolean`	No	`False`

TypeScript Interface

interface PillProps {
  children: React.ReactNode;
  pressed?: boolean;
  selected?: boolean;
  onClick?: () => void;
  disabled?: boolean;
  size?: 'sm' | 'md';
}

Assertions (NASA Rule 5)

[type]children must be non-empty(NASA Rule 5)
[aria]pressed sets aria-pressed, selected sets aria-selected — never both(WCAG 4.1.2)

Usage

Import

import { Pill } from '@epasslive/design-system'

Basic

<Pill />

With Variants

<Pill variant="primary" size="md" />