Button Group

The button group component is used to group together related buttons and present them as a single visual unit.

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 selected>two</bp-button>
  <bp-button>three</bp-button>
</bp-button-group>

Secondary

one

two

three

code

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

<bp-button-group action="secondary">
  <bp-button>one</bp-button>
  <bp-button selected>two</bp-button>
  <bp-button>three</bp-button>
</bp-button-group>

Flat

one

two

three

code

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

<bp-button-group action="flat">
  <bp-button>one</bp-button>
  <bp-button selected>two</bp-button>
  <bp-button>three</bp-button>
</bp-button-group>

Icon

code

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

<bp-button-group>
  <bp-button-icon shape="font-size" aria-label="font size"></bp-button-icon>
  <bp-button-icon selected shape="italic" aria-label="italic"></bp-button-icon>
  <bp-button-icon shape="number-list" aria-label="number list"></bp-button-icon>
  <bp-button-icon shape="highlighter" aria-label="highlighter"></bp-button-icon>
  <bp-button-icon shape="attachment" aria-label="attachment"></bp-button-icon>
</bp-button-group>

Icon Secondary

code

<bp-button-group action="secondary">
  <bp-button-icon shape="font-size" aria-label="font size"></bp-button-icon>
  <bp-button-icon selected shape="italic" aria-label="italic"></bp-button-icon>
  <bp-button-icon shape="number-list" aria-label="number list"></bp-button-icon>
  <bp-button-icon shape="highlighter" aria-label="highlighter"></bp-button-icon>
  <bp-button-icon shape="attachment" aria-label="attachment"></bp-button-icon>
</bp-button-group>

Icon Flat

code

<bp-button-group action="flat">
  <bp-button-icon shape="font-size" aria-label="font size"></bp-button-icon>
  <bp-button-icon selected shape="italic" aria-label="italic"></bp-button-icon>
  <bp-button-icon shape="number-list" aria-label="number list"></bp-button-icon>
  <bp-button-icon shape="highlighter" aria-label="highlighter"></bp-button-icon>
  <bp-button-icon shape="attachment" aria-label="attachment"></bp-button-icon>
</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>

The selected attribute is used to indicate the current selected item within a group of items. It assists screen readers by conveying which item is currently selected, enhancing accessibility.

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>

The disabled attribute should be used for UI elements that are currently disabled, making them uninteractive. This attribute informs assistive technologies like screen readers that the element, while present in the document structure, is not usable or cannot be interacted with in its current state.

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' \| 'secondary' \| 'flat'`

Attributes

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

Slots

Name	Types	Description
`default`		button content

bp-button

Properties

Name	Types	Description
`action`	`'primary' \| 'secondary' \| 'flat' \| 'inline'`
`status`	`'accent' \| 'success' \| 'warning' \| 'danger'`	determine the visual status state
`pressed`	`boolean`	turns the button into a toggle button
`selected`	`boolean`	indicate the current "selected" state of various widgets
`expanded`	`boolean`	indicate if a control is expanded or collapsed
`readonly`	`boolean`	makes the element not mutable, meaning the user can not interact with button
`disabled`	`boolean`	determines if element is mutable or focusable
`type`	`'button' \| 'submit'`	default behavior of the button
`name`	`string`	represents the name of the current element as a string.
`value`	`string`	determines the current value
`popoverTargetElement`	`HTMLElement`
`popoverTargetAction`	`\| 'toggle' \| 'show' \| 'hide'`
`popovertarget`	`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' \| 'secondary' \| 'flat' \| 'inline'`
`status`	`'accent' \| 'success' \| 'warning' \| 'danger'`	determine the visual status state
`pressed`	`boolean`	turns the button into a toggle button
`selected`	`boolean`	indicate the current "selected" state of various widgets
`expanded`	`boolean`	indicate if a control is expanded or collapsed
`readonly`	`boolean`	makes the element not mutable, meaning the user can not interact with button
`disabled`	`boolean`	determines if element is mutable or focusable
`type`	`'button' \| 'submit'`	default behavior of the button
`value`	`string`	determines the current value
`popoverTargetElement`	`HTMLElement`
`popovertargetaction`	`\| 'toggle' \| 'show' \| 'hide'`
`popovertarget`	`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