@spectrum-web-components/button-group

Overview

sp-button-group delivers a set of buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons.

Usage

yarn add @spectrum-web-components/button-group

Import the side effectful registration of <sp-button-group> via:

import '@spectrum-web-components/button-group/sp-button-group.js';

When looking to leverage the ButtonGroup base class as a type and/or for extension purposes, do so via:

import { ButtonGroup } from '@spectrum-web-components/button-group';

Options

A button group can be either horizontal or vertical in its orientation. By default, a button group is horizontal. Use vertical option when horizontal space is limited.

Horizontal

<sp-button-group>
    <sp-button>Button 1</sp-button>
    <sp-button>Longer Button 2</sp-button>
    <sp-button>Short 3</sp-button>
</sp-button-group>

Vertical

<sp-button-group vertical>
    <sp-button>Button 1</sp-button>
    <sp-button>Longer Button 2</sp-button>
    <sp-button>Short 3</sp-button>
</sp-button-group>

Accessibility

Review the guidelines for the button children.