Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Chart Controls Button Group for Vue

Line, Bar, and Pie as labels and as icons, both rows sharing one chart type that starts on Line.

UI library: Ark UI

Two rows of the same choice, starting on Line. The selected type is filled and marked pressed. The other row is icons only, and it reads the same value, so picking Bar in either row fills Bar in both. No chart is drawn.

Put this above a dashboard when the chart type is a quick switch. Arrow keys in one control need a Toggle Group. In Vue, Ark UI does not draw the series from the selection.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div class="flex flex-col gap-4">
  <ButtonGroup aria-label="Chart type">
    <Button
      v-for="item in CHART_TYPES"
      :aria-pressed="chartType === item.value"
      :key="item.value"
      @click="handleSelect"
      size="sm"
      :value="item.value"
      :variant='chartType === item.value ? "default" : "outline"'
    >
      <component :is="item.icon" aria-hidden="true" data-icon="inline-start" />{{ item.label }}
    </Button>
  </ButtonGroup>
  <ButtonGroup aria-label="Chart type">
    <Button
      v-for="item in CHART_TYPES"
      :aria-label="item.label"
      :aria-pressed="chartType === item.value"
      :key="item.value"
      @click="handleSelect"
      size="icon-sm"
      :value="item.value"
      :variant='chartType === item.value ? "default" : "outline"'
    >
      <component :is="item.icon" aria-hidden="true" />
    </Button>
  </ButtonGroup>
</div>

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.

API Reference

Button Group

Sets aria-label="Chart type". The rest is on the Button Group page.

Button

Sets v-for="item in CHART_TYPES", aria-pressed="chartType === item.value", key="item.value", click="handleSelect", size="sm" and value="item.value". The rest is on the Button page.

All 39 button group examples