Empty states

Empty states

Empty states in containers and grids make it clear to the user that there is no content in them (versus a problem with loading the content). Good empty states give additional information to the user, such as how to add information or when information will be available.

Empty state layout example
  • Icon: 48px, #999
  • Text: 13px, rgba(0,0,0,55) (Label style)
  • Button: 14px, #0062e6 (Standard style)

Last updated: Jul 2017

Choosing the right style

If the user needs to perform an action once and once only, then no additional action button is needed besides the call-to-action button.

One-time-action example

If the user will be iterating or editing then the same action can be repeated in the header on containers, and below in lists and grids.

Multiple-action example

If the user can’t solve the problem, then show no action, but add a concise explanation.

No action example

Text should not exceed 300px in width, and should be no more than three total lines.

Max width example

If vertical space is at a premium, everything but the “no data” notification can be eliminated. “No data” should appear on the far left. Do not combine this method with the full-view on one screen or in one process.

Space-saving example

Last updated: May 2017

Do's and Don'ts for empty states

  • Don't align the full empty state message to the left or right. It should always be centered.
  • Don't use different labels on action buttons when in an empty state.
  • Do use a descriptive label that tells the user what they’re doing (”Add data” is good, “Add” is not).
  • Do customize the icon to better reflect the contents of your application.
  • Do give the user indication of what they need to do in order to see data.

Do don't example 1 Do example 2

Last updated: May 2017

Get the files

Want to begin working with the Pega Design System? Download the vector assets below.

Download design files

Last updated: May 2017

Next: Common actions