Empty States

For the majority of empty states on the web, Slab's Billboard component will do the trick. Here's how to use it.

Standard Empty States

The pattern we favor for empty states combines Billboard's image, title, message, and primaryAction properties.

Note that if your primary action prompts the user to add a new item, your button should use the plus-circle-outline icon, plus a verb ("Create Report, Assign User, etc.")

Empty state for a list of Reports, using Billboard

Compact Empty States

Billboard's only required property is its message text. For tight spaces, such as within popovers or modals, that might be all you need.

Billboard only rendering its message text ("Assigning Checklists...") within a popover