Pattern

Empty states

A collection with nothing in it yet, and a search or filter that matched nothing.

Copy it from /dashboard/accounts/:acctId/sites/:siteId/settings/locations

Nothing here yet, with its action

A collection with nothing in it: the dashed box with the collection’s glyph, one sentence that says why it is empty, and the action that fills it.

Route: /dashboard/accounts/:acctId/sites/:siteId/settings/locations
Screenshot: docs/agents/ui-patterns/empty-state-1440.png

No locations yet.

<EmptyState
  icon="location"
  message="No locations yet."
  action={{
    label: 'Add location',
    icon: 'add',
    onPress: () => setLocationParam(NEW_LOCATION),
  }}
/>

Nothing here yet, for a viewer

A caller who cannot fill the collection gets the box without the action: the review drawer’s Notes tab, for a caller who cannot edit the submission.

Route: /dashboard/accounts/:acctId/sites/:siteId/submitted-forms/:kind?review=:id

No notes yet.

<EmptyState
  icon="document"
  message="No notes yet."
  action={canEdit
    ? {
        label: 'Add note',
        icon: 'add',
        onPress: () => setIsComposing(true),
      }
    : undefined}
/>

Inside a panel

The box fills the width its container gives it, so it fits a drawer panel as well as a page, as the review drawer’s Notes tab shows it.

Route: /dashboard/accounts/:acctId/sites/:siteId/submitted-forms/:kind?review=:id

No notes yet.

<EmptyState
  icon="document"
  message="No notes yet."
  action={canEdit
    ? {
        label: 'Add note',
        icon: 'add',
        onPress: () => setIsComposing(true),
      }
    : undefined}
/>

No results

A search or filter that matched nothing, and nothing else: plain centred text in a bordered box, with a hint whose inline link clears the filters.

Route: /dashboard/accounts/:acctId/sites/:siteId/animal-list/:group
Screenshot: docs/agents/ui-patterns/empty-search-1440.png

No animals match this search or filter.

Try a different search or .

// animal-list-rows.tsx, in place of the rows.
<NoResults
  message="No animals match this search or filter."
  hint={
    <>
      Try a different search or{' '}
      <button
        type="button"
        onClick={state.clearFilters}
        className="text-brand-600 hover:text-brand-700"
      >
        clear filters
      </button>
      .
    </>
  }
/>