Patterns from production · Layout that holds

Floating surfaces clear the toasts

Two things in one corner never cover each other.

Floating surfaces clear the toastsLive demo

Try the controls to see the rule.

The rule

A floating control or card in a corner tells the page how much room it takes (a CSS variable). Toasts in that corner stack above it instead of covering it.

Tokens used

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

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

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