Empty State

We place empty states on pages where nothing has been created yet. They tell the user what they need to know about the page and how to get started creating or using the page’s main features.

Demo and Developer GuidelinesFigma Component

Anatomy

All empty states have an illustration, a header, body text, and, if the user has create permissions, a primary button which launches the main create action of the page.

Header

Headers are title case without punctuation and match the templates provided for that type.

Character count limit: 60

Body

Because empty states appear all over Procore, we want to make sure that the content is presented in a consistent format, while also making sure that they contain information that is helpful and non-generic. Body text is sentence case with punctuation.

Character count limit: 200

Always consider the following when writing content for empty states:

• Where is the user coming from?

• What will they want to do next?

• What do they already know about this page? (most of the time, we should assume       they know nothing)
Correct
Incorrect
It may may be tempting to write something like, “Once you upload drawings, you can manage them here.” While this is great as a standalone empty state, we need to recognize that users move through many tools as they work through their project. Though “manage” and “collaborate” may 
be the easiest choice of actions you can present to users, see if there are more descriptive ways 
to tell users what your tool is capable of.

Primary Button

The primary button label matches the primary create button on the page.

See Buttons for more information, including character count limits.

Types

Create

Users with Create Permissions
We show this empty state to users when they have create permissions on a tool’s list page. The empty state guides them through the step(s) they need to take to begin using the tool.
Template
Example
Multiple Setup Steps for Users with Create Permissions
If there are multiple actions users need to take before creating items, use this card layout. Each card describes one step in the process of setting up the tool. Each card must include an illustration, header, body text, and, optionally, a button.
The content for each step should, as much as possible, match the template for the empty state for users with create permissions.
The illustrations can be changed depending on your use case.
Users with Read Only Permissions
We show this empty state to users when they do not have create permissions on a tool’s list page. The empty state tells them about the tool and what they’ll find on the page once their team starts using it.
Template
Example

Search/Filter States

We show this empty state when a user has searched for a keyword or has applied filters that do not match anything in the tool.
Template
Example

Recycle Bin

We show this empty state when there are no items in the tool’s Recycle Bin.
Template
Example

Variations

Placement

Illustrations have a max padding of 96px above them. If the padding is less than 96px, the component will be centered horizontally centered. The component is always centered vertically.

Specifications

Padding

Styling