React Button Group - Density Controls
Display density selector button group for adjusting content spacing and information density in data tables and lists
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Information density affects both readability and capacity—density controls balance competing needs. This React component combines shadcn/ui's Button and ButtonGroup components for display density selection with stateful variant toggling between descriptive (Compact, Comfortable, Spacious) and size-based (XS, S, M, L, XL) density labels. Built on Radix UI with variant switching between default (active) and outline (inactive) states using size="sm" for compact settings controls, the pattern delivers content density switchers with clear active state. Perfect for data tables enabling row height adjustment, email clients offering message list density, file managers showing variable item spacing, or any content-heavy interface where users need density control—button groups unify density options, variant switching communicates selection, descriptive labels clarify spacing impact.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-display-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-display-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-display-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-display-4.jsonRelated patterns you will also like
Chart Controls
Visualization type switchers
Timeline Controls
Time period selectors
Toggle Group
Segmented toggle controls
Data Table
Tabular data display
Outline Button
Border-style button variant
Basic Button Group
Simple grouped buttons