Inputs & Textarea
Pull to Refresh
React Grid Layout
Buttons allow a user to take an action.
There are four types of buttons – icon only, basic, leading icon and trailing icon.
Buttons can have either bold or minimal emphasis. Both levels of emphasis offer action styles that help to further define the purpose of the button to the user through visual cues such as color.
There are four core action types that have defined styles – primary, secondary, tertiary and destructive. Primary is used for any action that is considered the main action on a page. Secondary or tertiary should be used for all other actions on the page. Destructive is used for actions that are destructive and permanent including deletion or removal.
Buttons can be built with a square or circle shape. The square shape maintains 2 pixel rounded corners.
Button status helps to provide feedback to the user after clicking or tapping on a button. In a happy path, the user will progress from the loading status to the success status and then return to the enabled state. In an error scenario, the user will progress from the loading status to the error status and should be shown messaging to alert them as to what went wrong and how to move forward.
For each action style, there are five button states — enabled, hover, active, focus and disabled.
Buttons can be displayed in large, medium and small sizes.
By default, the width of a button should be defined by the length of the text. Alternatively, a button can be set to a custom fixed width in order to maintain a consistent look across a page design.
DO: Only use one primary styled button when several buttons are adjacent to each other in the same container.
DON'T: Use multiple primary styled buttons when several buttons are adjacent to each other in the same container.