Empty State

1. icon

2. Illustration

Use this component as an Error state if a section of the app fails to load.
For example:

• An energy usage chart fails due to a network or service error.
• A dashboard cannot retrieve data.

Use this component to provide an Empty state if no content exists yet.
For example:

• A new OVO customer has no energy usage data.
• A list or history view is empty because nothing has been created yet.

Don’t use this component for inline form validation errors.
Use input error states and notifications to display form errors instead.

Don’t use this component if only a single card cannot retrieve data in a dashboard of multiple cards. The error fallback card should only be used if an entire section of the app cannot be loaded.

Do include an action and/or set expectations for what will happen next where possible.

Where a link or action is included within the component, the drop shadow must be displayed on the card background to indicate interactivity. Otherwise, no drop shadow is displayed.

Empty State

• Explain why the space is empty.
• Set expectations about what will happen next.
• Provide a next step if possible.

Error state

• State that something couldn’t load.
• Provide retry guidance if applicable.

Do

• Be clear and direct.
• Use plain language.
• Focus on what the user can do next (if possible).
• Use a calm, neutral tone.
• Frame empty states positively where possible.

Don’t

• Blame the user.
• Be overly technical like using raw error codes for example.
• Be vague.
• Overwhelm with instructions.
• Use humor in error scenarios.