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

<link rel="stylesheet" href="/0.5.1/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.1/@zurich/web-components/button.js"></script>
<script type="module" src="/0.5.1/@zurich/web-components/button-group.js"></script>

Code

<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>