ButtonGroup - Web Component
Browser support
Detected engine:
Chromium
Webkit
Gecko
Parameters
The Web component uses the <z-button-group>
tag:
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
buttons | object[] | Array of buttons |
config (optional) | string | Configuration for the button group |
The available slots for the component are:
Name | Tags | Description |
---|---|---|
default | span |
buttons
The buttons
parameter is an array of objects that define the buttons inside the ButtonGroup
. Each object must contain button component properties
to define the button.
config
The config
parameter is a string that defines the button group configuration. You can configure the type and the size of the buttons inside the group.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.5.0/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.0/@zurich/web-components/button.js"></script>
<script type="module" src="/0.5.0/@zurich/web-components/button-group.js"></script>
Code
html
<z-button-group
buttons='[{"config":"negative", "icon": "thumbs-down:line", "content": "Dislike"},{"config":"positive", "icon": "thumbs-up:line", "content": "Like"},{"config":"primary", "icon": "chat:line", "content": "Comment"}]'>
</z-button-group>