To represent a group of related buttons, use the <ui-buttons> element.

pillSet the shape of all the buttons in the button group
radioOnly one button in the group can be active at a time
checkboxOne or more buttons in the group can be active at a time
verticalThe buttons are displayed in a column

Button group

Buttons inside a <ui-buttons> element will be displayed next to each other without padding.

<ui-buttons> <ui-button>Back</ui-button> <ui-button>Forward</ui-button> </ui-buttons>

Radio and Checkbox group

A button group can have a state representing which buttons are “active” (selected). The behavior of the buttons is controlled by the radio or checkbox attribute.

<ui-buttons checkbox> <ui-button>Bold</ui-button> <ui-button>Italic</ui-button> <ui-button>Underline</ui-button> </ui-buttons> <ui-buttons radio> <ui-button>Left</ui-button> <ui-button>Center</ui-button> <ui-button>Right</ui-button> </ui-buttons>

Split button

When a button has a default action and also offers variants of that action, use a split button and popup-menu in a <ui-buttons> element.

<ui-buttons> <ui-button>Save</ui-button> <ui-button> <ui-icon>chevron down</ui-icon> <ui-popup-menu> <ui-menu-item>Save as PDF</ui-menu-item> <ui-menu-item>Save as JPEG</ui-menu-item> <ui-menu-item>Save as PNG</ui-menu-item> </ui-popup-menu> </ui-button> </ui-buttons>


To introduce a separation between two buttons in a group, use a <ui-divider> element.

<ui-buttons> <ui-button>Insert</ui-button> <ui-button>Duplicate</ui-button> <ui-button>Remove</ui-button> <ui-divider></ui-divider> <ui-button>Bring to Front</ui-button> <ui-button>Send to Back</ui-button> </ui-buttons>