Button

We use buttons to link to other pages or to trigger an action. Buttons clearly define what happens when a user clicks it.
Demo and Developer GuidelinesFigma Component

Types

Primary
Type
Icon
Tertiary
Icon + Label
Label
Icon
If there are multiple items that can be acted upon with the same verb, create 
a Dropdown.

Icon

Icons buttons should only be used when the icon itself can successfully convey the intent of the action. They should also be used in the context in which it is absolutely clear that the icon itself is a button. A tooltip should be present on hover describing the intent of the button.

Primary

Primary Action buttons are used on forms and modals as the main action, often a submit action. There should be only one primary button per form or modal.
The Primary Action in the tool header is the left-most button.
In a sticky footer or modal, the Primary Action button is the right-most button

States

Secondary

Secondary Action Buttons can appear on any page in Procore and express any non-primary actions you can take.
Labels consist of one or two singular, present-tense verbs that appear in the Glossary.

States

Tertiary

Tertiary Buttons are used as an exit or back button on forms and modals and are positioned next to the Primary Action button.
Common labels for this button are, Cancel, Skip, Back.

States

Best Practices

Button labels are consistent and title case without punctuation. They clearly define what happens when a user clicks a button with actionable, non-generic verbs.

Character count limit: 20

When there are 2 verbs in one button separate them with an ampersand (&).
Correct
Incorrect
When there are more than one button in a cluster, use only one Primary button. Other actions are secondary or tertiary buttons depending on the use case.
Correct
Incorrect
Parallel objects should not use a primary button. The primary action is based on the intent of the whole page, not a section of the page.
Correct
Incorrect

Specifications

Padding

Typography

Color

Button Glossary

Add
Configure
Copy
Create
When referring to adding “sub items” to existing created items (e.g. markups, related items)
When referring to setting the admin preferences for each tool, the project, or the whole account
When referring to making a duplicate of an item or group of items
When referring to creating new items in Procore
Delete
Distrubute
Download
Edit
When referring to deleting an item from Procore where a user cannot retrieve it (e.g. Drawings, Locations, Daily Log)

Use Move to Recycle Bin when referring to moving an item to the tool’s Recycle Bin
When referring to notifying one or a group of people (by email, activity feed, etc)
Use Send when referring to only sending an email
When referring to downloading an item or group of items to your device
When referring to changing or updating information in Procore

Use Bulk Edit to refer to editing multiple items at once

Email
Enable
Export
Fill Out
When referring to adding “sub items” to existing created items (e.g. markups, related items)
When referring to adding “sub items” to existing created items (e.g. markups, related items)
When referring to adding “sub items” to existing created items (e.g. markups, related items)
Fill out a fillable PDF
Filter
Generate
Go
Got It
When referring to finding information using the filter dropdown within specific pages in Procore
When referring to the automatic creation of items from other items in Procore (e.g. generate submittals from specifications)

Use this verb only when it is an automatic function NOT when a user can create an item using another item's information (e.g. create a change event from an RFI)

When referring to navigating to another place in the product

This is most seen in button labels when it links to another page in the product

E.g. Go to Submittals
When confirming that the user has acknowledged a piece of information presented within a non-permanent component on a page. Once the user clicks the “Got It” button, the component disappears

This should be used only when the content presented is informational and there is no other call to action needed in the component
Grant Permissions
Import
Mark Up
Move
When referring to setting or changing access levels of a user or users in Procore
When referring to bulk adding items to Procore from an import template
When referring to adding markups to items such as submittals or drawings.

Note that mark up (two words) is a verb, and markup (one word) is a noun
When referring to changing the location of an item in Procore to another location in Procore
E.g. Moving a file to another folder or moving an item to the Recycle Bin
Respond
Retrieve
Save
Search
When referring to replying to items in Procore
When referring to taking an item from the recycle bin and putting it back in the tool’s list
When referring to saving edits to an existing item
When referring to finding information using the search within specific pages in Procore
Send
Update
Upload
View
When referring to sending an email, sending feedback, or sending notifications
When referring to refreshing a page to view new content or edits made by someone on another device or screen
When referring to uploading an item from your computer to Procore
When referring to seeing general information of an item