Button Group

The button group component is used to group together related buttons and present them as a single visual unit. Each button in the group should have a clear and descriptive label that communicates its purpose. The group should be labeled if the relationship between the buttons is not immediately clear.

Example

one

two

three

code

<script type="module">
  import '@blueprintui/components/include/button-group.js';
  import '@blueprintui/components/include/button.js';
</script>

<bp-button-group>
  <bp-button>one</bp-button>
  <bp-button>two</bp-button>
  <bp-button>three</bp-button>
</bp-button-group>

Selected

button one

button two

button three

code

<script type="module">
  import '@blueprintui/components/include/button-group.js';
  import '@blueprintui/components/include/button.js';
</script>

<bp-button-group>
  <bp-button>button one</bp-button>
  <bp-button selected>button two</bp-button>
  <bp-button>button three</bp-button>
</bp-button-group>

Disabled

button one

button two

button three

code

<script type="module">
  import '@blueprintui/components/include/button-group.js';
  import '@blueprintui/components/include/button.js';
</script>

<bp-button-group>
  <bp-button>button one</bp-button>
  <bp-button>button two</bp-button>
  <bp-button disabled>button three</bp-button>
</bp-button-group>

Install

NPM

// npm package
import '@blueprintui/components/include/button-group.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/button-group.js/+esm';
</script>

Accessibility

Use clear, descriptive labels for each button that communicates its purpose.
Use aria-label or aria-labelledby to label the group if the relationship between the buttons is not immediately clear.
Provide a way for keyboard users to navigate through the buttons, such as by using the tab key.

bp-button-group

Properties

Name	Types	Description
`action`	`'primary' \| 'outline' \| 'flat'`

Attributes

Name	Types	Description
`action`	`'primary' \| 'outline' \| 'flat'`

Slots

Name	Types	Description
`default`		button content

bp-button

Properties

Name	Types	Description
`action`	`'primary' \| 'outline' \| 'flat'`
`status`	`'accent' \| 'success' \| 'warning' \| 'danger'`
`pressed`	`boolean`
`expanded`	`boolean`
`readonly`	`boolean`
`disabled`	`boolean`
`type`	`'button' \| 'submit'`
`name`	`string`
`value`	`string`
`form`	`HTMLFormElement`
`formAction`	`string`
`formEnctype`	`string`
`formMethod`	`string`
`formNoValidate`	`boolean`
`formTarget`	`string`
`labels`	`NodeListOf`
`validationMessage`	`string`
`validity`	`ValidityState`
`willValidate`	`boolean`
`checkValidity`	`any`
`reportValidity`	`any`
`setCustomValidity`	`any`
`formAssociated`	`boolean`

Attributes

Name	Types	Description
`action`	`'primary' \| 'outline' \| 'flat'`
`status`	`'accent' \| 'success' \| 'warning' \| 'danger'`
`pressed`	`boolean`
`expanded`	`boolean`
`readonly`	`boolean`
`disabled`	`boolean`
`type`	`'button' \| 'submit'`
`name`	`string`
`value`	`string`

CSS Properties

Name	Types	Description
`--background`
`--color`
`--border`
`--padding`
`--min-width`
`--font-size`
`--line-height`
`--text-align`

Slots

Name	Types	Description
`default`		button content