Split Button

A button with a menu beside it: the usual action one click away, its variations one more. Specification: docs/components/split-button.md

Basics

The action people usually want, and an arrow for the related ones. Two Buttons in a .canon-split-button: the action, then an icon-only button (data-display="icon", its label saying what the menu holds) that opens a Menu with popovertarget and aria-haspopup="menu". The arrow is drawn by the theme. Both buttons carry the same data-emphasis and data-intent.

Anatomy

Open: the arrow is held down and turned, the menu under it, ending where the split button ends.

Emphasis

Button's four emphases. The line between the halves is the button's own color laid over it. Minimal, for toolbars, is one piece at rest: point at it, or focus it, to see its two halves.

Size

data-size on the split button or a container: Button's sizes; the arrow is square. Its menu takes the size too when it sits inside the same container, or carries its own.

Intent

data-intent on both buttons, as on any Button.

States

Each half has Button's states. Disable the arrow alone when there is nothing else to offer; disable both to disable the split button.

Edge cases

Right to left: the arrow is on the left, and the menu ends at the split button's left edge.