role disclosure
Dropdown draft v0.4.1
A button that opens a menu of related actions.
A dropdown gathers actions that relate to one purpose (share, export, more actions on a row) behind a single button, and shows them in a menu when the button is activated. Activating an action closes the menu. The trigger is the Button component, so it takes every emphasis, intent and size of the button. A dropdown offers actions: choosing a value is the Select component, and a button whose main action sits next to its menu is the Split button component.
States matrix
Every option of each styling property against every declared state, per part when states belong to parts. Properties whose options combine in one component token path are crossed: one table per combination of the others. States are forced with data-state, so what you see is exactly what the CSS defines, independent of the pointer. A column header names the inputs or platforms a state belongs to; states without a web rendering are listed under the table.
Part trigger (button)
The Button that opens and closes the menu. Provides the accessible name and exposes whether the menu is expanded.
By emphasis
| Emphasis | default | hoverpointer | active | focus-visiblekeyboard | disabled | expanded |
|---|---|---|---|---|---|---|
accent |
|
|
|
|
|
|
subtle |
|
|
|
|
|
|
ghost |
|
|
|
|
|
|
By intent
| Intent | default | hoverpointer | active | focus-visiblekeyboard | disabled | expanded |
|---|---|---|---|---|---|---|
neutral |
|
|
|
|
|
|
brand |
|
|
|
|
|
|
error |
|
|
|
|
|
|
By size
| Size | default | hoverpointer | active | focus-visiblekeyboard | disabled | expanded |
|---|---|---|---|---|---|---|
xsmall |
|
|
|
|
|
|
small |
|
|
|
|
|
|
medium |
|
|
|
|
|
|
large |
|
|
|
|
|
|
Part item
One action. Activating it performs the action and closes the menu. With a destination, the item is a link and navigates.
By intent
| Intent | default | hoverpointer | active | focus-visiblekeyboard | disabled |
|---|---|---|---|---|---|
neutral |
|
|
|
|
|
error |
|
|
|
|
|