Button Group

Button Group is a native web component that joins adjacent pura-button elements, collapsing borders and rounded corners so the set reads as a single segmented control. Use it to group related actions (such as filters, view toggles, or mutually linked options) side by side. Supports horizontal (default) or vertical orientation.

Preview

<pura-button-group>
  <pura-button>Day</pura-button>
  <pura-button>Week</pura-button>
  <pura-button>Month</pura-button>
</pura-button-group>

<pura-button-group orientation="vertical">
  <pura-button>Profile</pura-button>
  <pura-button>Settings</pura-button>
  <pura-button>Sign out</pura-button>
</pura-button-group>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/button-group.js"></script>

import "./pura/lib/button-group.js";