Skip to content
Airframe

Badges & Chips

Badges, chips, pills, icon boxes, avatars, spinners, and skeletons for status indicators and loading states.

Intent badges and chips use soft backgrounds with hard text for WCAG AA contrast on small labels.

Patterns

Section titled “Patterns”
  • Avatar: af-avatar, af-avatar-{sm|lg}
  • Badge: af-badge, af-is-* (soft + hard)
  • Chip: af-chip, af-is-* (soft + hard)
  • Icon box: af-icon-box, af-is-sm / af-is-lg
  • Pill: af-pill, af-pill__tag, af-is-on-primary
  • Skeleton: af-skeleton, af-skeleton-*
  • Spinner: af-spinner, af-spinner-{sm|lg}