Button
Clickable elements for anything you want people to click on
Buttons make common actions immediately visible and and easy to perform with one click or tap. They are used primarily for actions such as "Post a Project", "Bid", "Award", or "Accept". Less prominent actions, such as "View More", are executed using plain buttons, which visually resemble links.
Common Usage
Buttons are used as part of larger components or patterns in a UI, they follow a specific hierarchy and are triggers for definitive events or actions, such as:
- - Calls to action (CTAs)
- - Moving users through a sequence of screens
- - Ending or completing a process
- - Navigation
Buttons vs Links
Buttons are primarily for actions, while Links are used primarily for navigation, often appearing within or directly after a sentence. The HTML rendering for these components carries meaning, and it's essential to use them intentionally and consistently.
Design Principles
As buttons are typically performed during important definitive actions in a flow, they must follow these general design principles:
- - Be easily identified amongst other UI elements, including other buttons
- - Provide a visual indication that it will trigger an important action
- - Be clear as to the action that will occur when it's triggered
Anatomy
1. Button copy: Indicates what clicking the button does.
2. Icon (optional): To further emphasize the button's action.
Example
Placement
Multiple button types can be used to express different emphasis levels as described in the Button hierarchy section. Generally, a user will navigate a layout from the top left to the bottom right, and therefore the placement of buttons should reflect the following:
Within a page
- - Primary actions - generally associated to high-emphasis buttons, are typically placed on the bottom left (as the layout allows)
- - Supporting secondary actions (mid-emphasis) to be placed alongside the left of the primary action
- - Tertiary actions (low-emphasis) to the placed elsewhere as needed but not as the primary focus
Inside modals
- - Primary actions are typically placed on the bottom right (as the layout allows)
- - Supporting secondary actions to be placed alongside the left of the primary action
- - Tertiary actions to the placed elsewhere as needed but not as the primary focus
Related components
- - To combine or lay out multiple buttons, use the
button group component - - The button group component is used to create the
split button andtoggle buttons - - For navigational actions that appear within or directly following a sentence, use the
link component
Using multiple buttons together
Buttons with related actions can be placed next to each other. See also button hierarchy.
Examples of such actions are:
- - Forwards and backwards - which are often represented by 'Continue' and 'Back' or 'Accept' and 'Cancel'.
- - 'Create a quote' and 'Post a project' - Where both actions takes users to our main funnel.
- - 'Log In' and 'Sign Up' - where both action leads users to the platform.
Do
Don't
Have a clear hiearchy of actions using different emphasis buttons
Primary actions such as moving forward ('Continue' or 'Accept') should use a high emphasis contained button, while going backwards ('Back', ' Cancel', or 'Delete') is considered a less-pronounced action and should use the text button.
Aim to always have only one primary action on each section of the page. Other important actions should use the outline button. See Hierarchy for more guidelines on this.
Do
Don't
Do
Don't
Limit the number of buttons
The maximum number of buttons we can have in a grouping is three, and the most common usage is when there is a skippable step in a form.
Don't
Content guidelines and best practises
Buttons should be clear and concise to indicate to the user the action they are about to take.
Use action verbs
Button labels should inspire users to act with action verbs. Users who read an action verb know what the button will do. They can take action without reading any supporting text such as confirmation dialog.
Do
Don't
Use precise diction
Each action verb you use has a specific connotation. Users can misinterpret what the button will do if your diction isn't precise.
Do
Don't
Use task-specific language
A vague and generic button label such as 'Submit' or 'Finish' causes uncertainty in users. They're unsure what the button will do because the label doesn't specify the intention. Users need to know the result of their actions, and only task-specific language can do this.
Do
Don't
Use concise, and easy to scan button labels to indicate the next action to the user.
Make the user's action as straightforward as possible in less than three words.
Do
Don't
Use title case capitalization
Buttons should be written with the title case with each word capitalized, except when words are articles, prepositions, or conjunctions.
- - Email Us
- - My Projects
- - Terms and Conditions
Do
Don't
Stick to the standard hierarchy order, with primary actions on the right and secondary on the left.
Primary actions using the contained button should be placed on the right, and secondary action with the outline button should be placed to the left. If there is a third action, the less-pronounced action should be put to the left using the text button.
Don't
Inputs
disabled : boolean
submit : boolean
backIcon ?: boolean
busy ?: boolean
buttonGroupFirst ?: boolean = false
buttonGroupLast ?: boolean = false
buttonGroupMiddle ?: boolean = false
buttonGroupPosition ?: ButtonGroupPosition
buttonType ?: "submit" | "button" = 'button'
color ?: ButtonColor
display ?: ButtonDisplay = 'inline'
displayDesktop ?: ButtonDisplay
displayTablet ?: ButtonDisplay
fragment ?: string
label ?: string
Use only when necessary. This adds in aria-label for links / buttons that doesn't have a descriptive text. For example, a button that only has an icon inside it.
link ?: string
Url used for button link case
linkActive ?: string | string[]
linkActiveOptions ?: { exact: boolean; }
newTab ?: boolean
Whether to open the link in a new tab in desktop.
nextIcon ?: boolean
queryParams ?: { [k: string]: any; }
queryParamsHandling ?: QueryParamsHandling
rel ?: string = ''
size ?: ButtonSize
sizeDesktop ?: ButtonSize
sizeTablet ?: ButtonSize
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.