Empty state
What a page says when there is nothing yet, and the one thing to do about it.
openvibe-shared/kitJSON
Build it
kit.empty({ icon: 'chat', title: 'No rooms yet', text: 'Start the first one: public, or private to the people you invite.', action: { href: '/rooms/new', label: 'Start a room' } })Props
icon- string?
text- string?
title- string?
action- any?
Anatomy
- iconcolor color.accent.base
- titleweight type.weight.bold
- textcolor color.text.muted
- actiona primary button
Behaviour and access
- Keyboard
- Standard focus order
- Outside tap
- Leaves it open
- Scroll
- The page still scrolls
- Reduced motion
- Remove movement; keep the state change.
- Name
- its title and line
- Target
- 44 px
- Focus
- the action is one Tab stop
States
- default
Tokens
color.accent.basetype.weight.boldcolor.text.muted
Android · Jetpack Compose
Column
@Composable fun OvEmpty(title: String, text: String? = null, action: Pair<String, () -> Unit>? = null) { Column(Modifier.fillMaxWidth().padding(OvScale.SpaceXl), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(OvScale.SpaceSm)) { Text(title, fontWeight = FontWeight.Bold) if (text != null) Text(text, color = MaterialTheme.colorScheme.onSurfaceVariant, textAlign = TextAlign.Center) if (action != null) OvButton(action.first, action.second) } }
iOS · SwiftUI
struct OvEmpty: View { let title: String var text: String? = nil var body: some View { ContentUnavailableView { Text(title).fontWeight(.bold) } description: { if let text { Text(text) } } } }
Markup
Default
<div class="ovk-empty"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 5h16v11H8l-4 4Z"/></svg><p class="ovk-empty-title">No rooms yet</p><p>Start the first one: public, or private to the people you invite.</p><a class="ovk-btn ovk-btn--primary" href="/rooms/new"><span>Start a room</span></a></div>