Hacktron Design System

Empty states

What to show when there is nothing to display.

  • No data yet. A new organization with no repositories, or a settings panel with nothing configured. Use EmptyState: an icon, a title, an optional description, and one optional primary action, centered and full width. Write the title as an instruction ("Create a repository") rather than a status ("No repositories found").
  • No results. A table's search or filters matched nothing. The table and its columns are still the right context; only the rows are missing. Use the emptyTitle and emptyDescription props on Table. It renders a plain title and description row without an icon, since there is nothing to create, only filters to clear.

Guidelines

  • Keep the populated and empty layouts structurally identical (same header, same surrounding chrome) so the switch between them does not shift the layout.
  • Do not put more than one action in the action slot of EmptyState.
  • Do not nest EmptyState inside a table's #empty slot. Its centered icon layout does not fit a table row. Use emptyTitle and emptyDescription and let Table render the row.

Examples

Presentational (no data yet)

Create a repository

Connect a repository to start scanning it for vulnerabilities.

<template>  <EmptyState    icon="i-lucide-folder-plus"    title="Create a repository"    description="Connect a repository to start scanning it for vulnerabilities."  >    <template #action>      <Button variant="primary">Connect repository</Button>    </template>  </EmptyState></template>

Zero results (inside a table)

No repositories match your filters

Try adjusting or clearing your filters.

<template>  <Table    :data="[]"    :columns="columns"    empty-title="No repositories match your filters"    empty-description="Try adjusting or clearing your filters."  /></template>