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

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

Button Label
Usage
Add
When referring to adding “sub items” to existing created items (e.g. markups, related items).
Configure
When referring to setting the admin preferences for each tool, the project, or the whole account.
Copy
When referring to making a duplicate of an item or group of items.
Create
When referring to creating new items in Procore.
Delete
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.
Distribute
When referring to creating new items in Procore.
Download
When referring to downloading an item or group of items to your device.
Edit
When referring to changing or updating information in Procore.
Use Bulk Edit to refer to editing multiple items at once.
Enable
When referring to turning on a feature, tool, button, or item.
Export
When referring to saving/exporting an item or group of items as a PDF/ CSV/BCF/etc file.
Fill Out
Fill out a fillable PDF.
Filter
When referring to finding information using the filter dropdown within specific pages in Procore.
Generate
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).
Go
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).
Got It
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
When referring to setting or changing access levels of a user or users in Procore.
Import
When referring to bulk adding items to Procore from an import template.
Mark Up
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.
Move
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
When referring to replying to items in Procore.
Retrieve
When referring to taking an item from the Recycle Bin and putting it back in the tool’s list.
Save
When referring to saving edits to an existing item.
Search
When referring to finding information using the search within specific pages in Procore.
Send
When referring to sending an email, sending feedback, or sending notifications.
Update
When referring to refreshing a page to view new content or edits made by someone on another device or screen.
Upload
When referring to uploading an item from your computer to Procore.
View
When referring to seeing general information of an item.