import {Flex, Box, Text, BorderBox} from '@primer/components'
export const meta = {displayName: 'Empty States'}
Empty states appear when there is no content on a page or feature. The blankslate component is used to represent large empty states across our products. These guidelines demonstrate best practices for using the blankslate component and designing empty states. If you're looking for guidelines on implementation, please refer to Primer CSS.
The blankslate is made up of several elements that work together to inform the user about a feature and how to proceed forward. Below are the different elements of the component and how to modify them.
The graphic can bring delight, preview an interface element, or represent the goal of the feature. Graphics should be placed intentionally and with thought about the intention of the content. Graphics also differ in meaning and appeal to the user, which is why the blankslate component has multiple variations. These variations are outlined later on this page.
Primary text is the first piece of information in the empty state presented to the user. It can make a user feel much more comfortable to engage with the content or begin a feature flow. Primary text should sound welcoming, human, and convey the intention of the feature.
This optional text is used to inform the user about the feature in more detail. Secondary text should be brief and non-redundant if possible. From the text, users should be able to understand the general purpose of the feature and how it may help them accomplish a goal.
Blankslates can and are encouraged to use one primary action. This button should lead to a feature or component creation flow. Button copy should be keep brief and descriptive. If a button requires further specification, consider adding an Octicon.
Secondary actions are optional and are represented by a text link located below the primary action button. A secondary action is used to direct a user to additional content about the feature. This might look like "Learn more about X" or "Check out the guide on X" or simply "Learn more".
The border is visible by default and helps define the structure of the blankslate component within the context of the page.
Empty states have multiple variations that can be used in different contexts.
Pictograms present a great preview of what should be in place of the empty state. Blankslates should default to using a pictogram for graphic elements.
Illustrations should be used sparingly in blankslates - only in cases where it is necessary to evoke emotion from the user. For example, illustrations in a new user experience can help introduce octocats to the user and bring a more personalized experience.
Voice and tone are important to making sure users are not only engaged, but also informed about features. Empty states should explain features in addition to conveying intention. Below is a good example of conveying intention in the primary text and using the secondary text to inform.
