Skip to content
CFA Design System

Surface

ReactProps
Github icon-storybook-square Storybook Markdown Copy for LLM

A surface is applied to a component to create hierarchy within the UI. It is used to help communicate order, interactivity, and emphasize foreground and background relationships.

Import

import { Surface } from "@cfa/react-core";

Live Editor

Guidelines

When to use

  • Surface is an engineering-only primitive for elevation and background.

Do

  • Let composed components such as Card, Panel, Drawer, Modal, and Popover take elevation and background from the system.

Avoid

  • Choosing Surface in design deliverables. Use Card, Panel, or Drawer.
  • Using Surface when content needs structural slots such as header, body, footer, or actions. Use Card, Panel, or Drawer.
  • Stacking elevation wrappers. Nesting degrades visual hierarchy.

Examples

Elevation

Radius