Skip to content

ButtonGroup - CSS Component โ€‹

Browser support โ€‹

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
html
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.4.2/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/Button.css" />
<link rel="stylesheet" href="/0.4.2/@zurich/css-components/ButtonGroup.css" />
Code
html
<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>