Button Icon Group

The icon button group component is used to group together related icon buttons. This can be useful for creating a toolbar or a set of controls for a specific feature. Each icon 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

code

<script type="module">
  import '@blueprintui/components/include/button-icon-group.js';
  import '@blueprintui/icons/shapes/number-list.js';
  import '@blueprintui/icons/shapes/highlighter.js';
  import '@blueprintui/icons/shapes/attachment.js';
  import '@blueprintui/icons/shapes/font-size.js';
  import '@blueprintui/icons/shapes/italic.js';
</script>

<bp-button-icon-group>
  <bp-button-icon shape="font-size" aria-label="font size"></bp-button-icon>
  <bp-button-icon 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-icon-group>

Selected

code

<script type="module">
  import '@blueprintui/components/include/button-icon-group.js';
  import '@blueprintui/icons/shapes/number-list.js';
  import '@blueprintui/icons/shapes/highlighter.js';
  import '@blueprintui/icons/shapes/attachment.js';
  import '@blueprintui/icons/shapes/font-size.js';
  import '@blueprintui/icons/shapes/italic.js';
</script>

<bp-button-icon-group>
  <bp-button-icon selected shape="font-size" aria-label="font size"></bp-button-icon>
  <bp-button-icon 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-icon-group>

Disabled

code

<script type="module">
  import '@blueprintui/components/include/button-icon-group.js';
  import '@blueprintui/icons/shapes/number-list.js';
  import '@blueprintui/icons/shapes/highlighter.js';
  import '@blueprintui/icons/shapes/attachment.js';
  import '@blueprintui/icons/shapes/font-size.js';
  import '@blueprintui/icons/shapes/italic.js';
</script>

<bp-button-icon-group>
  <bp-button-icon disabled shape="font-size" aria-label="font size"></bp-button-icon>
  <bp-button-icon 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-icon-group>

Install

NPM

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

CDN

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

Accessibility

Use clear, descriptive labels for each icon 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.
If the group contains mutually exclusive options, use the aria-checked attribute to indicate the selected button.

bp-button-icon-group

Properties

Name	Types	Description
`buttons`

CSS Properties

Name	Types	Description
`--border`
`--border-radius`

Slots

Name	Types	Description
`default`		slot for bp-icon

bp-button-icon

Properties

Name	Types	Description
`i18n`
`shape`	`string`
`action`	`string`
`direction`	`Directions`
`icon`
`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
`i18n`
`shape`	`string`
`action`	`string`
`direction`	`Directions`
`pressed`	`boolean`
`expanded`	`boolean`
`readonly`	`boolean`
`disabled`	`boolean`
`type`	`'button' \| 'submit'`
`name`	`string`
`value`	`string`

CSS Properties

Name	Types	Description
`--icon-width`
`--icon-height`
`--width`
`--height`
`--color`
`--cursor`
`--background`
`--padding`
`--outline`
`--outline-offset`
`--border`

Slots

Name	Types	Description
`default`		slot for text content or bp-icon