En ButtonGroup Widget
The ButtonGroup Widget displays multiple values as a button group. It supports various data types and offers flexible styling options.
This widget uses all vis-2 Settings and Common Settings. See Home for details.
The widget-specific settings override the more general settings.
| Field Name | Type | Default | Description | Condition |
|---|---|---|---|---|
| onlyIcon | checkbox | false | Show icons only (no text) | Only when onlyText=false |
| onlyText | checkbox | false | Show text only (no icons) | Only when onlyIcon=false |
| buttonGroupVariant | select | 'text' | Display variant (text, outlined) | - |
| buttonGroupOrientation | select | 'horizontal' | Orientation of the button group | - |
| buttonGroupColor | color | - | Color scheme of the buttons | - |
Note: In addition to the settings above, the Write Value settings (delay/interval) are available. These control how value changes are written to the OID. See Common Settings - Write Value for details.
- Minimalist, text only without background or border
- Lowest visual priority
- Recommended for tertiary actions or dense layouts
- Buttons with border, transparent background
- Less visual weight than filled buttons
- Recommended for secondary actions
- Enable
onlyIconto show only the icons without text - Useful for compact displays
- Icons should be self-explanatory
- Enable
onlyTextto show only the text without icons - Useful when visual space is limited
- Recommended for accessibility
- Buttons are arranged side by side (left to right)
- Space-saving in height
- Default for most use cases
- Buttons are arranged one below the other (top to bottom)
- Space-saving in width
- Good for narrow layouts or many options
The buttonGroupColor field allows you to set a custom color for the button group using a color picker. This color affects the visual appearance of the buttons when they are in a selected or active state.
The ButtonGroup Widget supports various data types:
- Two buttons: true and false
- Typical application: On/Off, Yes/No
- Multiple buttons for numeric values
- Example: Fan speeds (0, 1, 2, 3)
- Multiple buttons for text values
- Example: Modes (Auto, Manual, Eco, Comfort)
- Any values
- Flexible application for different data types
Individual settings can be made for each button (value):
- Icon (large and small)
- Colors (icon, text, background)
- Header/Footer
- All Common fields with suffix (e.g., icon1, backgroundColor2, ...)
- Fan Speeds: 0, 1, 2, 3 (horizontal, contained)
- Operating Modes: Auto, Manual, Eco, Comfort (horizontal, outlined)
- Favorites: Selection from predefined scenes (vertical, text)
- Light Scenes: Reading, Movie, Relaxation, Party (horizontal, contained)