Button group

Button groups are used to wrap a series of buttons on a single line.

Examples

Base #

To render a button group, wrap a series of buttons in a div and apply the class chi-button-group.

Vertical #

To render a series of buttons vertically, apply the class modifier -vertical.

Fluid buttons

Button groups can be expanded to fill the parent space by applying the class -fluid.

Horizontal #

Vertical #

Sizes

Button groups support the following sizes: -xs, -sm, -md, -lg, -xl. The default size is -md.

Horizontal #

-xs

-sm

-md

-lg

-xl

Vertical #

-xs

-sm

-md

-lg

-xl

Hybrid buttons #

Button groups support all button types and styles, including icons. Mix and match text and icons to form a hybrid button group.

Hybrid buttons sizes #

Hybrid buttons support the following sizes: xs, sm, md, lg, xl. The default size is md.

-xs

-sm

-md

-lg

-xl

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon