As a: Product team
I want: To use a split button
So that: In situations where users have a choice of multiple actions to take, the user interface can support the primacy of the most common action but provide access to the others.
component brought forward by @Tim Chen
Background
A technical discovery will be undertaken to see how we might accomplish this request using the existing components.
Acceptance criteria
If possible we want this functionality to be added to an existing component, however, the specific user needs may dictate that this is a separate component with unique functionality
Consider, understand, and recommend an approach for the split button
Option 1: clicking the button always shows the menu of options to select from
Option 2: There are two buttons to click for the multi action button the “Main” button would be the most “common” action, and the “menu” button would collect up other less used but related actions
Select an icon to indicate the presence of the “multi-action” functionality
Accessibility - Note: the below considerations may end up helping us select an between the options.
Consider the keyboard navigation for each option
Consider the screen reader experience for each option
Looking to understand
Should we do option 1 or 2 or both?
Can we do this using our current button components?
Spark450
commented
7 hours ago
As a: Product team I want: To use a split button So that: In situations where users have a choice of multiple actions to take, the user interface can support the primacy of the most common action but provide access to the others.
component brought forward by @Tim Chen
Background
A technical discovery will be undertaken to see how we might accomplish this request using the existing components.
Acceptance criteria
If possible we want this functionality to be added to an existing component, however, the specific user needs may dictate that this is a separate component with unique functionality
Consider, understand, and recommend an approach for the split button
Option 1: clicking the button always shows the menu of options to select from
Option 2: There are two buttons to click for the multi action button the “Main” button would be the most “common” action, and the “menu” button would collect up other less used but related actions
Select an icon to indicate the presence of the “multi-action” functionality
Accessibility - Note: the below considerations may end up helping us select an between the options.
Consider the keyboard navigation for each option
Consider the screen reader experience for each option
Looking to understand
Should we do option 1 or 2 or both?
Can we do this using our current button components?
When should designers do option 1 or 2?
Why did Tim choose “option 1”?
Should the icon be Chevron or the three dots
Follow visual design of dropdown menu options
Figma design contribution files
GitHub issue