Empty state ​

Empty states are used when a list, table, or chart has no items or data to show. This is an opportunity to provide explanation or guidance to help users progress. The empty state component is intended for use when a full page is empty, and not for individual elements or areas in the interface.

Usage ​

<script lang="ts" setup>
import {
  Button,
  EmptyState,
  EmptyStateActions,
  EmptyStateContent,
  EmptyStateDescription,
  EmptyStateTitle,
} from '@returnless/focus-ui';
</script>

<template>
  <EmptyState>
    <EmptyStateContent>
      <EmptyStateTitle>Manage your inventory transfers</EmptyStateTitle>
      <EmptyStateDescription>Track and receive your incoming inventory from suppliers.</EmptyStateDescription>
    </EmptyStateContent>
    <EmptyStateActions>
      <Button variant="secondary">Learn more</Button>
      <Button>Add transfer</Button>
    </EmptyStateActions>
  </EmptyState>
</template>

Best practices ​

Empty states should:

• Orient users by clearly explaining the benefit and utility of a product or feature.
• Simplify a complicated experience by focusing on a few key features and benefits.
• Use simple and clear language that empowers users to move their business forward.
• Be encouraging and never make users feel unsuccessful or guilty because they haven't used a product or feature.
• Explain the steps users need to take to activate a product or feature.
• Use only one primary call-to-action button.

Content guidelines ​

Title ​

Empty state titles should:

• Be action-oriented: encourage users to take the step required to activate the product or feature.

Subtitle ​

Empty state subtitles act like body content. They should:

• Describe or explain what's in the empty state title or item title.
• Be conversational: include articles such as "the", "a", and "an".

Primary action ​

Buttons are used for the most important actions you want users to take. They should be:

• Clear and predictable: users should be able to anticipate what will happen when they click a button. Never deceive users by misleading titles.
• Action-led: buttons should always lead with a strong verb that encourages action. To provide enough context to users use the {verb + noun} format on buttons except in the case of common actions like "Save", "Close", "Cancel", or "Ok".
• Scannable: avoid unnecessary words and articles such as "the", "an", or "a".

Secondary action ​

Secondary actions are used for less important actions such as "Learn more" or "Close" buttons. They should follow all the other content rules outlined for primary buttons.