When to use
Use dropdown buttons to filter, sort, or modify page content when you deal with long lists that would clutter the screen.
Anatomy
- Left icon
- Right icon
- Label
- Body
Action types
|
Button confirmatory |
Emphasis |
Usage |
|---|---|---|
|
1. Default |
Medium |
Use if it's related to the main action. |
|
3. Primary |
High |
Use as the main call-to-action to draw attention. |
|
4. Secondary |
High |
Use as the second call-to-action to draw attention. |
|
Button tint |
Emphasis |
Usage |
|---|---|---|
|
4. Primary
|
Low |
Use for secondary actions that are less important. |
|
5. Secondary |
Low |
Use for secondary actions that are less important. |
Where to use
✅ Filters
✅ Actions
✅ Preferences settings