ButtonGroup - CSS Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Construction

The CSS component uses the <section> tag with the z-button-group HTML custom attribute.

z-button-group

The z-button-group parameter is the main parameter used to render the button group component.

INFO

Each button inside the z-button-group container should contain a button component with the z-button HTML custom attribute.

Check the button component documentation to customize the button.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Button.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/ButtonGroup.css" />

Code

<section z-button-group>
  <button z-button="negative" icon="thumbs-down:line">
    Dislike
  </button>
  <button z-button="positive" icon="thumbs-up:line">
    Like
  </button>
  <button z-button="primary" icon="chat:line">
    Comment
  </button>
</section>