Toolbar

Group related controls in one tab stop and move between them with the arrow keys.

General

Tab enters the Toolbar once and leaves it on the next Tab. Inside, the arrow keys, Home and End move the focus. Give it an aria-label.

Vertical

With orientation set to vertical, the Up and Down arrows move the focus.

Editor actions

Mix buttons and chips. The text below shows which formats are on.

APIs

Toolbar.Props

AttributeDescriptionTypeAccepted valuesDefault
orientationdirection of the row and of the arrow keys'horizontal' | 'vertical'-horizontal
...native props, such as aria-labelHTMLAttributes--

Toolbar.Separator.Props

AttributeDescriptionTypeAccepted valuesDefault
...native propsHTMLAttributes--
Edit this page on GitHub