Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Interactive

View Switcher Button Group for React

A view switcher for Grid, List and Cards layouts, as labeled buttons and as icon-only buttons that share one selection.

Framework
UI library

The layout switch at the top of a file browser or a product grid. Grid, List and Cards are labeled in the first row and icon-only in the second; both read one value, so the chosen layout is filled in each row and announced as pressed.

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 view tracked?

One value, starting at grid. Each button carries its own value, and pressing it stores that value. The matching button gets variant="default".

Why do both rows change together?

They read the same value. Show the labeled row where there's room and the icon row in a toolbar.

How are the icon-only buttons named?

Each has an aria-label, Grid, List or Cards, and size="icon-sm". The icons have aria-hidden="true".

How is the active view announced?

Its button sets aria-pressed, so a screen reader reads it as pressed.

How do I remember the choice?

Save the value to local storage or the URL when it changes, and read it back as the starting value. The demo always starts on Grid.

Does the demo change a layout?

No. Render your items as a grid, list or cards from the value.

All 39 button group examples