ButtonGroup
ButtonGroup is used to group Button and Dropdown elements into more functional units, which will be automatically styled and arranged when inserted inside the element.
Basic usage
Add a wje-button-group element to the HTML with the desired attributes and include the desired Button or Dropdown elements inside it.
ButtonGroup shape
ButtonGroup with Dropdown
Icons in ButtonGroup
Split buttons
ButtonGroup also allows you to display a split button with multiple functions.
Styling
ButtonGroup colors
Border color in ButtonGroup
When to use
Use wje-button-group when you need a consistent WebJET-based implementation for this UI concern.
When not to use
Do not stretch the component beyond its responsibility; compose smaller primitives for edge cases.
Accessibility
Validate keyboard behavior, focus states, contrast, and meaningful labels for interactive elements.
Best Practices
- Prefer component APIs over direct DOM manipulation.
- Stick to design tokens and naming conventions.
- Test components with realistic data before production rollout.
Attributes and Properties
No properties available for this component.
Events
No events available for this component.
Methods
findButton
| Description | Find button method to find the button element. |
| Signature | (el: object) => object |
toggle
| Description | Toggles the state of a group of buttons based on the active button. |
| Signature | (activeButton: object, buttons: Array<object>, index: any) => void |
updateButtonState
| Description | Updates the state of a button by removing one mode attribute and setting another mode attribute. |
| Signature | (button: HTMLElement, modeToRemove: string) => void |
CSS Shadow Parts
| Name | Description |
|---|---|
native | The component's native wrapper. |
native | The component's native wrapper. |
CSS Custom Properties
No CSS custom properties available for this component.
Slots
| Name | Description |
|---|---|
default | The button group main content. |