group | title |
---|---|
admin-pattern-library |
Buttons |
Buttons bring attention to actions on the screen. This article will cover the use of general buttons on Magento.
For solutions not described in this topic, please refer to other related patterns or contact the Magento UX Design team.
Buttons should be used anywhere a call to action(CTA) is needed. Discretion should be used when deciding when to use a button vs. a hyperlink, icon, or another call to action.
- Do not use buttons to indicate actions that are better suited as hyperlinks such as "Cancel". Some exceptions may apply.
- Do not use more than one primary page level action on a single page for different actions. Some exceptions may apply.
- Do not use buttons to indicate a link to more information or to a task not related to primary flow.
Variations of this pattern are as follows, and will be detailed in the section on Appearance and behavior:
- Page level buttons are to be used for calls to action on pages.
- Form level buttons are to be used on forms.
- Table level buttons are to be used within tables or data grids
Buttons will be take on one of the below variations.
Page Level | Form Level | Table Level |
---|---|---|
Primary | Primary | Regular |
Secondary | Secondary | Icon |
Toggle | Toggle | Toggle |
Tertiary | Tertiary | Tertiary |
Table Button | Table Button | Table Button |
Primary Dropdown | Primary Dropdown | Primary Dropdown |
Secondary Dropdown | Secondary Dropdown | Secondary Dropdown |
CSS style classes will need to be established for any buttons that require a custom defined style.
Family: Open Sans Semibold;
Size: 17px; (or 1.125em based on 14px default font)
Color: #ffffff
Primary: #eb5202; (CSS-$magento-orange-color)
Secondary: #514943; (CSS-$magento-dark-brown)
Primary: #aa2d00; Secondary: #282421;
Opacity: 50%
Top/Bottom: 11px
Left/Right: 20px
Top/Bottom margin spacing should not be less than 10px
Left/Right margin spacing should not be less than 20px
Family: Open Sans Semibold;
Size: 17px; (or 1.125em based on 14px default font)
Color: #ffffff
Primary: #eb5202; (CSS-$magento-orange-color)
Secondary: #514943; (CSS-$magento-dark-brown)
Primary: #aa2d00
Secondary: #28242
Dropdown stroke: #337ab7
Dropdown Highlight: #eeeeee
Opacity: 50%
Top/Bottom: 11px
Left/Right: 20px
Top/Bottom margin spacing should not be less than 10px
Left/Right margin spacing should not be less than 20px
Family: Open Sans Semibold
Size: 14px; (or .750em based on 14px default font)
Color: #ffffff
Secondary: #514943; (CSS-$magento-dark-brown)
Secondary: #28242
Opacity: 50%
Top/Bottom: 12px
Left/Right: 30px
Top/Bottom margin spacing should not be less than 10px
Left/Right margin spacing should not be less than 20px
Quaternary buttons are only after all the buttons hierarchy have been used.
Family: Open Sans Semibold
Size: 13px; (or .750em based on 14px default font)
Color: #322923
Light: #dcdcdc
Solid
Width: 1px;
Border color: #9d9d9d;
Dark:#cccccc;
Opacity: 50%
Top/Bottom: 12px
Left/Right: 15px
Top/Bottom margin spacing should not be less than 10px
Left/Right margin spacing should not be less than 10px
The toggle button acts like a checkbox. When you touch/click on it, the state toggles between "yes" and "no" and/or "on" and "off".
Use toggle for:
- Binary selection (true/false) when only a single option can be set
- When multiple non-required selections can be set
- In relation to other form elements when needed
Do not use checkboxes if:
- Multiple options need visibility
No additional variations.
Family: Open Sans Semibold
Size: 13px; (or .750em based on 14px default font)
Color: #322923
Light: #dcdcdc
Solid
Width: 1px
Border color: #9d9d9d
Dark: #cccccc
Dark: #cccccc
Opacity: 50%
Top/Bottom: 12px
Left/Right: 15px
Top/Bottom margin spacing should not be less than 10px
Left/Right margin spacing should not be less than 10px
(Keyboard shortcut same as checkbox)
[Download Button PSD source]({{ site.downloads }}/magento-buttons.psd).
Please reach out to the Magento UX Design team if you need anything else.