Design
Is documented
The component is fully documented
Status
Status
Healthy
Figma component
Includes a link to a Figma component that has been imported to Supernova
Principles
Use when
- needed to show actions related to the primary function or that can be performed subsequently.
- to indicate that secondary actions are contextually related to a function.
Don't use when
- there is a lack of context or when the function is not closely related to the primary function. Instead, use a button.
- navigating between pages or states. Instead, consider using a content switcher.
Structure
- Button (Primary CTA)
- Icon button
- Overflow menu
Properties
Types
|
Primary |
It should be used to indicate the primary action or actions to be taken on a record on show pages. |
|---|---|
|
Secondary |
Secondary split button can be used when emphasizing a secondary action that is not the primary action or actions to be taken on a record. It can be used in conjunction with the primary type. |
|
Outline |
It should be used when listing actions related to a record, especially for the action that is least important. If a primary or secondary button is not used on the relevant page, it is not recommended to use. |
Size
|
Default |
It can be used on widgets in web interfaces. |
|---|---|
|
Large |
Large can be preferred for installation or setup stages. |
|
Small |
It can be used in windows such as modals when required. |
Behavior
Positioning
Split button should be used in places where it is relevant to the type of data displayed, such as the show page of a record and its corresponding widgets.
Overflow menu placement
The overflow menu should be aligned to the right of the icon button (and the split button as a whole). This way, the actions listed in the overflow menu can appear contextually related to the primary action of the split button.
The items in the overflow menu should be ordered in terms of importance, from most relevant to least relevant.