Button Style
- Style: Mono Color Restricted.
- Color: Icon color should match the color of the Button label.
- Container: Containers around the icons are not to be used.
- Position: Placed at either start or end of the label.
- State: The Command Button component automatically handles the enabled, pressed and disabled states.
- Label: Label can be removed to display an icon only button.
- Stroke: No stroke applied.
Icon Size
Please check Icon Sizes section on Design Parameters.
iOS 8x
For more information concerning iOS 8 button icon sizes, padding and placement please go here:
http://aseng-wiki.us.oracle.com/asengwiki/display/ASUsability/Button+-+iOS+8.x
Android 5x
For more information concerning Android 5x button icon sizes, padding and placement please go here:
http://aseng-wiki.us.oracle.com/asengwiki/display/ASUsability/Button+-+Android+5.x
Windows 10x
For more information concerning Windows 10x button icon sizes, padding and placement please go here:
http://aseng-wiki.us.oracle.com/asengwiki/display/ASUsability/Button+-+Windows+10.x
Icon Button Styles for Android 5x
| Type | Default | Alert | Confirm | Light Gray | Dark Gray | Black | Bright | Outline | Notes |
| Back Enabled | #0572ce | #e90a0b | #268901 | #444345 | #5f656e | #474747 | #c84400 | #333333 | |
| Back Selected | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | |
| Borderless Enabled | #0572ce | #e90a0b | #268901 | #444345 | #5f656e | #474747 | #c84400 | #333333 | |
| Borderless Selected | #FFFFFF | #FFFFFF | #FFFFFF | #444345 | #FFFFFF | #FFFFFF | #FFFFFF | #333333 | |
| Small Chip | #FFFFFF | #FFFFFF | #FFFFFF | #444345 | #FFFFFF | #FFFFFF | #FFFFFF | #333333 | |
| Large Chip | #FFFFFF | #FFFFFF | #FFFFFF | #444345 | #FFFFFF | #FFFFFF | #FFFFFF | #333333 | |
| Small Bordered | #FFFFFF | #FFFFFF | #FFFFFF | #444345 | #FFFFFF | #FFFFFF | #FFFFFF | #333333 | |
| Medium Bordered | #FFFFFF | #FFFFFF | #FFFFFF | #444345 | #FFFFFF | #FFFFFF | #FFFFFF | #333333 | |
| Large Bordered | #FFFFFF | #FFFFFF | #FFFFFF | #444345 | #FFFFFF | #FFFFFF | #FFFFFF | #333333 | |
| Bottom Sheet Enabled | #0572ce | N/A | N/A | N/A | N/A | N/A | N/A | N/A | |
| Bottom Sheet Selected | #0572ce | N/A | N/A | N/A | N/A | N/A | N/A | N/A |
Icon Button Styles for iOS 8x
| Type | Default | Confirm | Alert | Highlight | Black | Bright | White | Outline | Notes |
| Back Enabled | #0572ce | #168100 | #e40007 | #6c57e3 | #000000 | #c84400 | #FFFFFF | #333333 | |
| Back Selected | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #000000 | #FFFFFF | |
| Borderless Enabled | #0572ce | #168100 | #e40007 | #6c57e3 | #000000 | #c84400 | #FFFFFF | #333333 | |
| Borderless Selected | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #000000 | #FFFFFF | |
| Small Chip Enabled | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #000000 | #333333 | |
| Small Chip Selected | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #000000 | #FFFFFF | |
| Large Chip Enabled | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #000000 | #333333 | |
| Large Chip Selected | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #000000 | #FFFFFF | |
| Small Bordered Enabled | #0572ce | #168100 | #e40007 | #6c57e3 | #000000 | #c84400 | #FFFFFF | #333333 | |
| Small Bordered Selected | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #000000 | #FFFFFF | |
| Medium Bordered Enabled | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #000000 | #333333 | |
| Medium Bordered Selected | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #000000 | #FFFFFF | |
| Large Bordered Enabled | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #000000 | #333333 | |
| Large Bordered Selected | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #000000 | #FFFFFF | |
| Action Sheet Enabled | #0572ce | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #333333 | |
| Action Sheet Selected | #0572ce | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF | #FFFFFF |