Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Display

Density Controls Button Group for React

A display density picker with Compact, Comfortable and Spacious, and a row of XS to XL sizes that share one selection.

Framework
UI library

The setting that decides how tightly a table or list is packed. Compact, Comfortable and Spacious name the choices; the second row offers the same idea as sizes, XS to XL. Both rows write one value, so only one button across them is filled at a time.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the selected density tracked?

One value, starting at comfortable. Each button carries its own value, and pressing it stores that value. The matching button gets variant="default" and aria-pressed, the others outline.

Do the two rows share a selection?

Yes. They write the same value, so picking M clears Comfortable. Give each row its own value if they should be independent.

Why does the second row say S but store sm?

The labels and values are separate in the data: S, M and L are shown while sm, md and lg are stored. Change either list to suit your settings.

Does the demo change any spacing?

No. It only stores the choice. Read it where you render your rows, for example to pick padding classes.

What size are the buttons?

All use size="sm", so the picker stays small next to the content it controls.

How does the keyboard move through it?

Tab moves from button to button, and Enter or Space selects. For Arrow key movement inside one tab stop, use a Toggle Group.

All 39 button group examples