Skip to content

Add a split button  #4171

@ryankeairns

Description

@ryankeairns

Dashboard has plans to implement a split button design as it would provide both a preferred, single-click call-to-action and a secondary menu with links to other panel building tools. This could presumably be achieved using existing buttons (certainly as separate buttons altogether), but it's a common pattern that I suspect other teams may find useful as well.

In the case of Dashboard, the main/left section of the 'Add panel' button would open Lens, directly. The arrow/right section would open a context menu, like so:

Screen Shot 2020-10-22 at 11 34 09 AM

Additional considerations...

  • The example shows the filled style, but I supposed this would need to be available in the hollow/outlined version as well
  • I presume the 'extra actions' button will only ever be on the right
  • Is this a new component or is there some way to sort of smush buttons together via props?
  • Ultimately ths may get used in the stacked header nav, not sure what if any complications that presents

Metadata

Metadata

Assignees

Labels

design decisionUse this to flag an item that needs input from the design team
No fields configured for Discovery.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions