Split button

A split button, nol-split-button: an icon button for an action and, joined to its end, an arrow that opens a menu of choices for it, such as a terminal's New terminal and its Choose a shell. Each half is a native button in the tab order with its own accessible name and tooltip, the icon button's size and looks, and no gap between them. While either half is hovered or the menu is open, one outline in the widget border color wraps both, with an edge of the same color between them, and the hovered half or the open arrow shows the toolbar hover fill inside it; at rest it shows only the two glyphs. Under forced colors the outline and the edge are ButtonText, and the open arrow is Highlight.

Examples

Loading…

States

Loading…

API

Selector nol-split-button

Import from @noldova/ui.components.angular

Inputs

Name	Type	Default	Description
`icon`	`string`	Required	The Material Symbols name of the main half's glyph, such as `add`.
`label`	`string`	Required	The main half's accessible name, naming its action.
`tooltip`	`string \| null`	`null`	The main half's tooltip, such as its label with its shortcut; its label when null, which is the default.
`menuLabel`	`string`	Required	The arrow's accessible name and tooltip, naming the menu's choices.
`menu`	`TemplateRef<unknown> \| null`	Required	The menu the arrow opens, a template holding a `MenuComponent`, as `nolMenuTriggerFor` takes it; null opens none.
`menuAlignment`	`OverlayAlignment`	`OverlayAlignment.Start`	How the menu lines up with the arrow it opens below, as `nolMenuAlignment`; the start when not bound.
`tooltipSide`	`OverlaySide`	`TooltipDefaults.standard.side`	The side both halves show their tooltips on, as `nolTooltipSide`; above when not bound.
`disabled`	`boolean`	`false`	Whether the main half is unavailable: it is marked aria-disabled, stays focusable, looks disabled and emits nothing, while the arrow still opens the menu. False by default.
`busy`	`boolean`	`false`	Whether the main half's work is under way: the main half is a busy `IconButtonComponent`, its spinner in place of its glyph, and the whole split button keeps its size and ignores clicks, middle clicks, Enter and Space, and the arrow's up and down arrows, so it emits nothing and the menu stays shut. False by default.

Outputs

Name	Type	Description
`triggered`	`void`	Emits when the main half is clicked, or pressed with Enter or Space, unless it is disabled.

Accessibility

Key	Action
`Tab`	Moves the focus to the main action, then to the arrow: each half is a tab stop of its own.
`Enter`	On the main action, triggers it; on the arrow, opens the menu with its first choice focused, or closes it.
`Space`	On the main action, triggers it; on the arrow, opens the menu with its first choice focused, or closes it.
`Arrow Down`	On the arrow, opens the menu with its first choice focused; in the menu, moves to the next choice.
`Arrow Up`	On the arrow, opens the menu with its last choice focused; in the menu, moves to the previous choice.
`Escape`	Closes the menu and gives the focus back to the arrow.

Each half is a native button with its own name, set as aria-label: the main action's is label, the arrow's is menuLabel.

The arrow is marked aria-haspopup="menu" and reports aria-expanded; the menu it opens has the menu role, and its choices the menuitem role.

A disabled split button marks its main action aria-disabled, so it stays focusable and does nothing, while the arrow still opens the menu.

A busy split button marks its main action aria-busy, and ignores clicks, Enter, Space and the arrow's up and down arrows until it is no longer busy.

Specification

Loading…