sp-button-group

Examples API

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

CSS Custom Properties #

Name Default
--spectrum-buttongroup-button-gap-x var(--spectrum-global-dimension-static-size-200)
--spectrum-buttongroup-button-gap-y var(--spectrum-global-dimension-static-size-200)

Description #

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

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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>