Vanilla UI Kit EmptyState v1.0.0 · toast →

Empty states, one file.

A friendly placeholder for nothing at all — four line-style illustrations, an accent action, and your page's theme, automatically.

The four icons

inbox · search · error · folder — all drawn in the family's 1.5px-stroke style. size: 'sm' here.

EmptyState.render(el, { icon: 'search', size: 'sm',
  title: 'No results', description: '…' })

With actions

An accent button plus a quiet link-button.

EmptyState.render('#actions', {
  icon: 'folder',
  title: 'No projects yet',
  description: 'Create your first project…',
  action: { label: 'New project', onClick: … },
  secondaryAction: { label: 'Learn more', onClick: … }
})

Search, no results

Type something unfindable — the empty state appears with the query in its description and a “Clear search” action. Try “zzz”.

handle = EmptyState.render('#no-results', {
  icon: 'search', size: 'sm',
  title: 'No matches',
  description: 'Nothing matches “' + q + '”.',
  action: { label: 'Clear search', onClick: clear }
})
handle.update({ description: … })   // as the query changes
handle.remove()                     // when results return

Declarative

No JS at all — data attributes plus an adopted action button that keeps its own onclick.

<div data-ves data-ves-icon="error"
     data-ves-title="Something went wrong"
     data-ves-description="We could not load this view.">
  <button data-ves-action onclick="retry()">Retry</button>
</div>

Live update

update() re-renders the same handle in place.

handle.update({ icon: 'inbox',
  title: 'Inbox zero', description: '…' })