Button Group

A set of buttons grouped together to form a single control.

<div class="btn-grp">
  <button class="btn-grp-item active">Day</button>
  <button class="btn-grp-item">Week</button>
  <button class="btn-grp-item">Month</button>
</div>

Installation

Built with pure HTML and CSS. Include ds-shared.css in your project.

pnpm add @norbielink/ds

Usage

Import

<link rel="stylesheet" href="ds-shared.css">

Basic

<div class="btn-grp">
  <button class="btn-grp-item active">Option A</button>
  <button class="btn-grp-item">Option B</button>
  <button class="btn-grp-item">Option C</button>
</div>

API Reference

Classes

Class	Description
`btn-grp`	Container — inline-flex, single border
`btn-grp-item`	Individual button, right-bordered
`btn-grp-item.active`	Selected state — black bg
`btn-grp-dk`	Dark mode modifier

← Previous Button Next → Calendar