sp-button-group
Attributes and Properties #
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
dir | dir | 'ltr' | 'rtl' | 'ltr' | |
vertical | vertical | boolean | false |
Slots #
Name | Description |
---|---|
default slot | the sp-button elements that make up the group |
Description #
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';
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>