Buttons allow the user to move through a task by triggering single actions. The container gives the button visual impact and the text label communicates a clear purpose.
Variants
Used for the primary action in a layout, this button drives the user forward in a task. Only use one primary button per screen.
Used for any alternate actions in a layout, this button lets the user know what they can do instead of moving forward in a task. Only use when a primary button is also present. Multiple default buttons can appear in a single screen.
Used instead of the default button, this button achieves a cleaner layout. Only use when a primary button is also present. Multiple subtle buttons can appear in a single screen.
States
In addition to the default state, every button has a hover/active state and a focus state. Optional states for disabled and loading are also available.
Disabled
Used for an unavailable action, this state signals that the user must complete another action first. Only use when a triggering action, such as choosing between two options shown on screen, must be completed before the button’s action becomes available.
Loading
Used when a button initiates a longer action, this state signals to the user that their request will be completed shortly. Only use when the expected wait time is between 5 and 15 seconds. Loading buttons animate with a trailing ellipsis until the action completes.
Design Environment
Primary buttons will always take prominent placement to the right of or on top of other buttons. Inline buttons should follow the dual-inline action group pattern. No more than two individual buttons should appear side-by-side in a single layout. In mobile environments, single buttons will automatically fill the full width of the screen. In tablet and desktop environments, buttons will fill 100% of their containing element.
Keep single buttons at a distance of 32px from the previous component. When stacking buttons, any buttons placed below a primary button should leave a margin of 8px in between.
Only use inline placement when there is a clear relationship between the primary and secondary actions being offered. Primary buttons always appear to the right of any other inline button. Buttons should be of equal width and separated in the center by a margin of at least 16px.
NOTE: The spacing between buttons will look different in the DSM design library. Since we are designing on a 375px artboard, the space between buttons will likely be an uneven value. This is okay as long as the margin between the buttons in the final product is consistent.
Microcopy
Use strong verbs and specific language in text labels to clearly signal what will happen next.
Text should be in title case with no end punctuation. Ideal length is between 5 and 25 characters.
Switch to Wilmington