478
edits
Gaia/Design/BuildingBlocks: Difference between revisions
Jump to navigation
Jump to search
→Buttons
(→Banner) |
|||
| Line 121: | Line 121: | ||
==Buttons== | ==Buttons== | ||
| | ||
'''Usage:''' Allow users to perform an action when tapped. The action is communicated using text or an icon. | |||
'''Characteristics''' | |||
* Have two components: visual target and hit target. The hit target is always larger to assist users in hitting the target. | |||
* States: | |||
** Normal | |||
** Pressed | |||
** Disabled | |||
'''Types''': | |||
* <b>Action buttons</b> - used when there are only a few actions and a list is not required. The main action button uses a highlight colour. | |||
* <b>List buttons</b> - used when displaying a list of actions or to trigger the display of a value selector | |||
* <b>Input field buttons</b> - used to perform actions with input fields | |||
* <b>Special / custom buttons</b> - used for specific actions including recording, dialing, and others. | |||
'''Downloads''' | |||
* [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/buttons.css Link to CSS in Github ] | * [https://github.com/mozilla-b2g/gaia/blob/master/shared/style/buttons.css Link to CSS in Github ] | ||
* [https://mozilla.box.com/shared/static/zjaip67nr9zxkba6zf2e.zip Source PSD (.zip) ] | * [https://mozilla.box.com/shared/static/zjaip67nr9zxkba6zf2e.zip Source PSD (.zip) ] | ||