Pill Button

Quick implementation

.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  background-color: var(--accent-bg);
  color: white;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pill-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1.5rem oklch(0.72 0.19 265 / 0.3);
}

.pill-button:active {
  transform: scale(0.98);
}

.pill-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pill-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Size variants */
.pill-button--sm {
  padding: 0.375rem 1rem;
  font-size: 0.85rem;
}

.pill-button--lg {
  padding: 0.875rem 2rem;
  font-size: 1.05rem;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer specializing in modern component design and design systems.

Your goal: Create a pill-shaped button component (fully rounded with border-radius: 9999px) with multiple size and style variants suitable for badges, filters, tags, and primary CTAs.

Technical constraints:
1. Use border-radius: 9999px to create fully rounded "pill" shape
2. Support at least 3 size variants: small (0.85rem text), medium (0.95rem), large (1.05rem)
3. Support filled variant (solid background with white text) and outline variant (transparent + border)
4. Padding should be proportional to font size (larger text = more padding)
5. Hover state should include scale(1.05) and shadow for tactile feedback
6. Active state should use scale(0.98) for pressed appearance
7. Must meet WCAG AAA contrast ratios in all states
8. Focus state must use visible outline for keyboard navigation

Vanilla implementation:
- Create .pill-button base class with size medium
- Use .pill-button--sm, .pill-button--lg for size variants
- Use .pill-button--outline for outline style variant
- Implement :hover, :active, :focus-visible states
- Support :disabled with opacity reduction

React implementation:
- Create Button component with size prop (sm, md, lg) and variant prop (solid, outline)
- Use BEM naming for modifier classes or CSS Modules
- Support children as text or React elements
- Export ButtonGroup component for pill clusters (spacing, wrapping)
- Support icon-only buttons with appropriate aspect ratio

Edge cases to handle:
1. Icon-only pills: maintain square aspect ratio (width === height)
2. Icon + text: align vertically with small gap
3. Very long text: consider max-width and text-overflow: ellipsis
4. Mobile: ensure minimum 44px clickable height
5. Dark backgrounds: verify outline visibility at all sizes
6. RTL text direction: mirror padding and icon alignment

Why this matters in 2026

Pill buttons are enjoying a renaissance in modern design. They feel friendlier, more approachable, and less corporate than sharp rectangular buttons. They're perfect for filtering interfaces, tag systems, and secondary CTAs where you want high interactivity without visual aggression.

In 2026, design systems require flexibility. A single pill button component with configurable size and style variants can replace dozens of custom button styles. This reduces CSS bloat, improves consistency, and makes your codebase maintainable at scale.

The logic

The pill button uses border-radius: 9999px, which creates a fully rounded shape regardless of button width. This is more robust than border-radius: 50%, which only works for square elements. The extra-large value ensures perfect rounding even if padding changes.

Size variants use BEM-style modifier classes (--sm, --lg) to adjust padding and font-size proportionally. Larger buttons get more padding to maintain visual balance. The filled variant uses var(--accent-bg) (a darker, saturated color) for high visual prominence. The outline variant reverses the colors on hover to provide interactive feedback. The scale transforms on hover/active provide tactile, physics-based feedback.

Accessibility & performance

Accessibility: Pill buttons must maintain 4.5:1 contrast in all states. The filled variant uses white text on a colored background; the outline variant uses colored text that inverts on hover. Always include a focus-visible outline with 2px width and 2px offset. For icon-only pills, include aria-label to describe the button's action.

Performance: The transform (scale) and box-shadow transitions are GPU-accelerated. The 0.2s duration is ideal for responsiveness. Avoid animating padding or border-radius, which trigger layout recalculations. Size variants use different padding and font-size but reuse all transition and state logic, making them memory-efficient.