ButtonGroup
ButtonGroup is used to group Button and Dropdown elements into more functional units that 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
The demonstration compares how buttons with different shapes behave in a group. The important thing is that the group still holds one coherent visual whole.
ButtonGroup with Dropdown
The demo combines a classic button and a dropdown in one group. It lends itself to primary action with additional secondary choices.
Icons in ButtonGroup
The demonstration concentrates on working with icons in a button group to make it clear how to keep the same height, rhythm and alignment.
Split buttons
ButtonGroup also allows you to display a split button with multiple functions.
Editing styles
ButtonGroup colors
The sample compares the color variations of the entire button group to make it clear how the group behaves in meaningful states.
Border color in ButtonGroup
The sample shows the outline color variations in the button group. It fits where you want a more subtle visual, but still maintain a meaningful distinction.
When to use
Use wje-button-group when you want to solve a given UI problem consistently within the WebJET design system.
When not to use
Do not use a component outside of its responsibility; in an unusual case, prefer to assemble multiple smaller components.
Accessibility
Check keyboard controls, focus states, contrast and clear naming of interactive elements.
Recommended practices
- Prefer API component over manual DOM interventions.
- Stick to design tokens and consistent naming conventions.
- Before deployment, test the component in real data scenarios.
Attributes and properties
active
| Popis | Určuje, či je komponent aktívny. |
| Atribút | active |
| Typ | boolean｜string｜number |
| Predvolené | false |
color
| Popis | Nastavuje farbu komponentu. |
| Atribút | color |
| Typ | string |
| Predvolené | primary |
fill
| Popis | Nastavuje textovú hodnotu uloženú vo voľbe fill. |
| Atribút | fill |
| Typ | string |
| Predvolené | link |
round
| Popis | Nastavuje textovú hodnotu uloženú vo voľbe round. |
| Atribút | round |
| Typ | string |
| Predvolené | false |
Events
Pre tento komponent nie sú dostupné žiadne udalosti.
Methods
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS shadow parts
| Názov | Popis |
|---|---|
native | Štýluje koreňovú shadow časť komponentu. |
native | Štýluje koreňovú shadow časť komponentu. |
CSS custom variables
Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.
Slots
| Názov | Popis |
|---|---|
default | Predvolený slot pre hlavný obsah komponentu. |