Patterns from production · Elements

One-line empty states

Explain the empty state and give one way forward.

One-line empty statesLive demo

Try the controls to see the rule.

The rule

Say what is empty in one line and offer one direct action. Keep the action visible beside the explanation when space allows.

Tokens used

  • size.tap44px
  • space.md12px
  • color.accent.basetheme.accent
  • motion.duration.base260ms

Native spec · generated from this pattern and the shared token registry

SwiftUI
struct OvEmptyState: View {
    let status: String
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    var body: some View {
        HStack(spacing: OvScale.spaceMd) {
            Text(status).font(.body)
        }
        .frame(minHeight: OvScale.sizeTap)
        .animation(reduceMotion ? .none : .easeOut(duration: OvScale.motionDurationBase), value: status)
    }
}
// Tokens: size.tap=44px, space.md=12px, color.accent.base=theme.accent, motion.duration.base=260ms
Compose
@Composable
fun OvEmptyState(status: String, reduceMotion: Boolean) {
    Row(
        modifier = Modifier.defaultMinSize(minHeight = OvScale.SizeTap),
        horizontalArrangement = Arrangement.spacedBy(OvScale.SpaceMd),
    ) {
        Text(status, style = MaterialTheme.typography.bodyMedium)
    }
    // Apply motion only when !reduceMotion.
}
// Tokens: size.tap=44px, space.md=12px, color.accent.base=theme.accent, motion.duration.base=260ms