Patterns from production · Status in one line

Outcome line

The outcome and its recovery actions share one calm row.

Outcome lineLive demo

Try the controls to see the rule.

The rule

Show the result with a status icon, clear title, and a quiet reason. Put the next useful actions in pill buttons on that same line.

Tokens used

  • radius.pill999px
  • size.tap44px
  • space.md12px
  • motion.duration.base260ms

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

SwiftUI
struct OvOutcomeLine: 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: radius.pill=999px, size.tap=44px, space.md=12px, motion.duration.base=260ms
Compose
@Composable
fun OvOutcomeLine(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: radius.pill=999px, size.tap=44px, space.md=12px, motion.duration.base=260ms