Function: Surface()

Surface(__namedParameters): Element

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

A depth-bearing container — the surface primitive of the FSL grammar.

Entity = Structure. Use it wherever a region needs to read as a distinct surface: cards, panels, sheets, the body of a dialog. Pick the level by how the surface should sit relative to the page, not by how it should look — the theme decides the shadow recipe per mode; the fill is evaluation's concern at every level. Non-interactive: it owns no hover/focus chrome; interactivity belongs to the controls placed inside it.

Parameters

Parameter	Type
__namedParameters	SurfaceProps

Returns

Element

Example

<Surface level="raised" padding="lg">
  <Heading level={3}>Storage</Heading>
  <Meter aria-label="Used" label="Used" value={72} />
</Surface>