Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Display

Chart Controls Button Group for React

A chart type picker with Line, Bar and Pie, as labeled buttons and as icon-only buttons that share one selection.

Framework
UI library

The switch above a dashboard chart. Line, Bar and Pie sit in one group; the selected type gets the solid default fill and aria-pressed, the others stay outline. The icon-only row reads the same state, so picking Bar in either row lights up both.

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 active chart type tracked?

One value, starting at line. Each button carries its type as its value, and one handler stores the value of the button you press. A button whose type matches gets variant="default", the rest outline.

Why do both rows change together?

They read the same value. The rows are two layouts of one control, labeled and icon-only.

How are the icon-only buttons named?

Each has an aria-label, Line, Bar or Pie, and size="icon-sm". The icons have aria-hidden="true".

How does a screen reader know which type is on?

Each button sets aria-pressed to whether it's the selected type, so the active one is announced as pressed.

Does the demo draw a chart?

No. It only keeps the selected type. Render your chart from that value.

Should this be a Toggle Group?

It can be. A Toggle Group with a single value handles the selection and Arrow key movement for you. This demo uses plain buttons, so Tab moves between them.

All 39 button group examples