Efniv0.1

Components

Empty state

Fill the void when a list, table, or drop zone has nothing to show. Give a reason and, when possible, a next step.

When to useanywhere a collection would normally be — a table with no rows, a search with no results, a drop zone waiting for files.

Import

import { EmptyState } from "@ravnhq/efni/empty-state"

With icon, description, action

No missions yet

When operators dispatch a mission it will show up here.

<EmptyState
  icon={<Icon icon={Inbox} size={20} />}
  title="No missions yet"
  description="When operators dispatch a mission it will show up here."
  action={<Button size="sm"><Icon icon={Plus} />New mission</Button>}
/>

Filtered — nothing found

No results for “aborted”

Try clearing the filter or widening the date range.

Title only

Nothing scheduled for today.

<EmptyState title="Nothing scheduled for today." />

Inside a card / list

Attachments

0 items

Drop files here

Or paste from clipboard.

Do & don't

No results for “aborted”

Try clearing the filter.

Explain why it's empty and offer the fastest next step.

No data

Don't ship a bare 'No data' — it looks like a bug and leaves the operator stuck.

Guidelines

Do
  • Distinguish first-run empties from filtered empties — the copy and the action differ.
  • Point the action at the fastest resolution — Clear filters, New mission, Invite operator.
  • Keep icon size consistent (~18–20px) so nothing shouts.
Don't
  • Don't use an empty state as decoration on a page that isn't actually empty.
  • Don't put more than one action; if there are two paths, this is a placement problem, not an empty-state problem.
  • Don't reuse the same icon across every empty state — pick one that hints at the domain.

Props

PropTypeDefaultDescription
iconReactNode—Usually an Icon at size 18 or 20.
titleReactNode—Required — one short sentence explaining the state.
descriptionReactNode—Optional detail. Two sentences max.
actionReactNode—Optional single call-to-action.
classNamestring—