ButtonGroup

Joined buttons

A set of related actions that read as one control — a pager, prev/next, a range picker. The buttons touch, share edges, and the outer corners belong to the group. The group stands upright and leans as one plate when any button in it is hovered or focused; orientation="vertical" stacks them, and the stack leans once rather than as a staircase of plates. Give the group a label; it becomes role="group"'s name.

Each button is its own tab stop and carries no selection state. For an exclusive choice with aria-pressed — Day / Week / Month where one is on — use ToggleGroup; for a main action with a menu beside it, SplitButton; for several groups with one tab stop and arrow-key roving, Toolbar.

Basic

<script setup lang="ts">
import { BlessButton, BlessButtonGroup } from "blessing-ui";
</script>

<template>
  <div class="row">
    <BlessButtonGroup label="Pager">
      <BlessButton variant="outline" aria-label="Previous">←</BlessButton>
      <BlessButton variant="outline">1</BlessButton>
      <BlessButton variant="outline">2</BlessButton>
      <BlessButton variant="outline" aria-label="Next">→</BlessButton>
    </BlessButtonGroup>
    <BlessButtonGroup label="Zoom">
      <BlessButton aria-label="Zoom out">−</BlessButton>
      <BlessButton>100%</BlessButton>
      <BlessButton aria-label="Zoom in">+</BlessButton>
    </BlessButtonGroup>
    <BlessButtonGroup orientation="vertical" label="Stack">
      <BlessButton size="sm">Top</BlessButton>
      <BlessButton size="sm">Mid</BlessButton>
      <BlessButton size="sm">End</BlessButton>
    </BlessButtonGroup>
  </div>
</template>

Usage

import { BlessButtonGroup } from "blessing-ui";

API

Props

Name	Type	Default	Description
orientation	"horizontal" | "vertical"	"horizontal"
label	string	—

Slots

Name	Scope	Description
default	—