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
This example compares how grouped buttons behave with different shapes while still reading as one connected control.
ButtonGroup with Dropdown
This example combines a standard button and a dropdown inside one group. It is a common pattern for a primary action with secondary options.
Icons in ButtonGroup
This example focuses on icon usage inside a button group so you can check height, rhythm, and alignment across grouped controls.
Split buttons
ButtonGroup also allows you to display a split button with multiple functions.
Styling
ButtonGroup colors
This example compares semantic color variants across the whole button group so it is easier to judge how grouped actions read in different states.
Border color in ButtonGroup
This example shows outline color variants in a button group. It is useful when you want a lighter visual treatment without losing semantic meaning.
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
active
| Description | Sets the "active" attribute to indicate the active state. |
| Attribute | active |
| Type | boolean｜string｜number |
| Default | false |
color
| Description | Retrieves the current value of the 'color' attribute. If the 'color' attribute is not set, it defaults to 'primary'. |
| Attribute | color |
| Type | string |
| Default | primary |
fill
| Description | Retrieves the 'fill' attribute of the element. If the 'fill' attribute is not set, it returns the default value 'link'. |
| Attribute | fill |
| Type | string |
| Default | link |
round
| Description | Returns whether the element has the 'round' attribute. |
| Attribute | round |
| Type | string |
| Default | false |
Events
No events available for this component.
Methods
No public methods available for this component.
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. |