Buttons and icons combined
Button icon and text combination
Font awesome icons may be selected to work along side button text.
- Button text is always aligned left
- The icon is always aligned right
- The icon may be replaced to match button functionality
Examples
Right chevron = navigate forwards
Left chevron = navigate backwards
Magnify = submit search
Button minimum heights
- Where space is available buttons should have a minimum height of 50px
- Where space is limited a button height of 40px may be used
50px height example:
40px height example:
Flexible height
- Where text runs on multiple lines the button height must be flexible
- The contained text and icon must be centred vertically
- Where buttons are positioned adjacent to each other, ensure button heights are equal
Flexible button height example:
