| Property | Values | Default |
|---|---|---|
| Open Boolean | true | false | true |
| Spacing Variant | Condensed | Wide | Wide |
| Placement Variant | Bottom | Bottom Start | Bottom End | Top | Top Start | Top End | Left | Left Start | Left End | Right | Right End | Right Start | Bottom Start |
| Full Width Mode Variant | Info in the documentation | Info in the documentation |
Split Button vs. Button vs. Segmented Control vs. Dropdown
|
Component |
Use when |
Strengths |
Don’t use when |
|---|---|---|---|
|
Button |
There’s a single clear action. |
Simple, direct, easy to understand. |
If you need related secondary actions → use Split Button. |
|
Split Button |
There’s a primary action plus a few closely related secondary actions. |
Combines efficiency (quick main action) with flexibility (extra choices). |
If only one action exists → use Button. If actions are equally important → use Segmented Control. If actions are too many/unrelated → use Dropdown or Action Group. |
|
Segmented Control |
The user must pick one of several equally important options (mutually exclusive). |
Shows all options upfront, supports quick comparison. |
If one action is dominant and others are secondary → use Split Button. If many options exist → use Dropdown. |
|
Dropdown |
There are many options or the actions are not tied to a single primary action. |
Compact, scalable, good for long or dynamic lists. |
If one option is clearly primary → use Split Button. If only 2–5 options and all are equally important → use Segmented Control. |