Skip to main content
161

Search Lumen

Find components, APIs, guides, and recipes.

GitHub
Android docs
LayoutAndroid

Surface

Compose content on semantic native backgrounds with shared padding and radius roles.

Public APILumenSurfaceAndroid / Compose

Native example

Use Surface

Use surfaces to express hierarchy through semantic canvas, surface, muted, and strong roles. Do not hardcode a parallel set of background colors.

Surface rendered in the Android phone emulator Lumen playground
Verified runtime captureAndroid phone emulator
kotlin
LumenSurface(
    tone = LumenSurfaceTone.Muted,
    padding = LumenSurfacePadding.Lg
) {
    LumenText("Workspace")
}

Reference

Public API

The primary shared and platform-specific options exposed by LumenSurface.

APIValues or typeDefaultDescription
tonecanvas · surface · muted · strongsurfaceSelects the semantic background role.
paddingnone · sm · md · lgmdApplies generated platform spacing.
radiusnone · sm · md · lgmdApplies a generated corner radius.
modifierNative composition APIComposes or lays out the surface with native APIs.

Native behavior

Design and accessibility

When to use it

Use surfaces to express hierarchy through semantic canvas, surface, muted, and strong roles. Do not hardcode a parallel set of background colors.

Accessibility

A surface does not add an accessibility role by itself. Descendant controls and content retain their native semantics.

Shared component

Available on other platforms

React NativeApple / SwiftUI
Android docsCompose module