Skip to main content

Interface: SurfaceProps

Defined in: components/Surface/Surface.tsx:39

Props for the Surface component.

Extends

  • Omit<React.HTMLAttributes<HTMLDivElement>, "style" | "className">

Properties

children?

optional children?: ReactNode

Defined in: components/Surface/Surface.tsx:74

The surface's content.

Overrides

Omit.children


evaluation?

optional evaluation?: "primary" | "muted"

Defined in: components/Surface/Surface.tsx:72

Emphasis of the hairline boundary. muted is the quiet default that lets elevation carry the separation; primary draws a firmer edge.

Default

'muted'

level?

optional level?: SurfaceLevel

Defined in: components/Surface/Surface.tsx:60

Elevation stratum. flat sits flush with the page (no shadow); raised is the default card/panel depth; overlay floats above raised content; blocking is the strongest in-flow depth (dialog bodies). Depth is carried by the paired shadow recipe alone, at every level, the same rule every occluding surface in the package already uses (Menu/Popover/ Tooltip/Dialog/Drawer/Toast read only elevation.surface[level] for shadow and informational.{evaluation}.background.default for fill — F-048). Accepted cost: a shadow that is suppressed (forced-colors, print) leaves no other depth cue on Surface; the hairline boundary (informational.{evaluation}.border.default) is unchanged by this and does not stand in for it — ADR-031 already classifies Surface as an embedded surface that owes no occluding ≥3:1 edge duty in that scenario, so this is a pre-existing, already- characterized gap, not a new one.

Default

'raised'

padding?

optional padding?: SurfacePadding

Defined in: components/Surface/Surface.tsx:66

Inner padding from the surface inset scale. none removes padding for surfaces that host their own edge-to-edge content (lists, media).

Default

'md'