Patterns from production · Status in one line

Progress strip

A short status first; details stay one tap away.

Progress stripLive demo

Try the controls to see the rule.

The rule

Show the current task, completed steps, and elapsed time in one compact row. Let the reader open details when they want the plan.

Tokens used

  • motion.duration.base260ms
  • motion.easing.standardcubic-bezier(.2,.7,.2,1)
  • size.tap44px
  • space.md12px

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

SwiftUI
struct OvProgressStrip: 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: motion.duration.base=260ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), size.tap=44px, space.md=12px
Compose
@Composable
fun OvProgressStrip(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: motion.duration.base=260ms, motion.easing.standard=cubic-bezier(.2,.7,.2,1), size.tap=44px, space.md=12px