Patterns from production · Elements

Metadata chips

Keep secondary metadata compact and breakable.

Metadata chipsLive demo

Try the controls to see the rule.

The rule

Present secondary metadata as short, labeled chips rather than raw URLs or long unbroken strings. Let chips wrap without widening the page.

Tokens used

  • space.md12px
  • radius.pill999px
  • color.text.primarytheme.text.primary
  • size.tap44px
  • motion.duration.base260ms

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

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