Component registry

Empty state

A truthful explanation and one next action when a group has no items.

All components · Kit documents · Definition as JSON

Live web demo

No sites yet

Add a site to give it a look of its own.

Add a site

Web source: openvibe-shared/kit · kit.empty({ title, text, action })

Anatomy

  • glyphcontext icon
  • titlewhat is empty
  • actionnext step

Props

title
string
text
string?
action
action?

Behavior and accessibility

States
empty · loading-resolved
Tokens
color.text.muted · color.accent.strong · size.tap
Keyboard
Standard focus order
Outside tap
No dismissal
Scroll lock
Page remains scrollable
Reduced motion
Remove movement; keep the state change.
Accessibility
Empty state. Visible keyboard focus; follow reading order. At least 44 × 44 dp or pt for every touch action.

Android · Jetpack Compose

Reference: OvEmpty in OpenVibe.Link's Android app (android/app/src/main/java/network/openvibe/kit/OvKit.kt). Use a Column with icon, title and one Button.

Material 3 container: Surface

iOS · SwiftUI

Use ContentUnavailableView with one action Button.

Example definition

{
  "schema": "design.component@1",
  "name": "empty-state",
  "props": {
    "title": "No sites yet",
    "text": "Add a site to give it a look."
  }
}

Other components