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
onetwothree
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
onetwothree
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
onetwothree
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 onebutton twobutton 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 onebutton twobutton 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
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.
Properties
| Name | Types | Description |
|---|
action | 'primary' | 'secondary' | 'flat' | |
Attributes
| Name | Types | Description |
|---|
action | 'primary' | 'secondary' | 'flat' | |
Slots
| Name | Types | Description |
|---|
default | | button content |
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 |
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 |