...
Action | Icon | Example |
|---|---|---|
Save | Floppy disk |  |
Delete | Trash can |  |
Printer |  | |
Download | IT appliance with down arrow |  |
Upload | IT appliance with up arrow |  |
Sort in ascending/descending order (this icon should only be used directly beside a column header so users know what they are sorting e.g. Date) | Up/down arrows together |  |
Edit | Pencil and card |  |
Filter | Funnel/ filter |  |
Home | House |  |
Settings | Cog/ gear |  |
Profile | Silhouette of a person |  |
Comment | Speech bubble |  |
Menu | Set of 3 horizontal lines |  |
Responsive design
In order to be inclusive to all users, we need to consider how our applications behave on smaller viewports. (For more information on viewports, see The viewport is the window to your site – Digital.gov.) While designing and building using responsive design principles will allow you to create an optimized layout for users accessing your application on smaller viewports, this is not the only benefit. This will also ensure you are supporting users with low vision who need to enlarge text by using the browser’s zoom function.
To help ensure the responsiveness of your applications, consider the following points when designing buttons:
Preservation of content - Content shouldn’t be removed or changed to view an application on a smaller screen size. Don’t change or remove the icons and/or text of a button when changing the size of the viewport.
Reflow strategy - Determine the breakpoints at which buttons will reflow and a strategy to maintain consistent placement across the application. For example, a button grouping with a primary and secondary button should reflow from being side-by-side on larger viewports to being stacked on smaller viewports. When side-by-side, the secondary button should be to the left of the primary. When stacked, the primary should be on top of the secondary.
Size - Buttons must maintain a minimum width of 160 px regardless of screen size. Increasing the width of buttons may make them easier to interact with on smaller viewports. To prevent text wrapping and ensure buttons don’t exceed the screen width, keep button text short and to the point. 25 characters or less is recommended.
Padding - Buttons must maintain sufficient padding. When positioned side-by-side on a large viewport, a minimum of 32 px of padding should be used. When stacked on a smaller viewport, a minimum of 24 px of padding should be used.
Once your design has been implemented, it’s important to test the functionality in various different viewports.
Technical specifications
Width of the button (minimum 160px) should be the size of the text label with additional padding:
Use 32px of horizontal spacing (white space) between buttons for desktop
Use 24px of vertical spacing (white space) between block-level buttons for mobile
All button text should be written in sentence case
Use a max of 25 characters with spaces
...