Surface
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
Examples
Elevation
Radius
Props
Visit the Documentation Site for the full list of props.
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | The children of the surface |
| className | string | - | CSS class names to apply custom styling. |
| elevation | 0 | 1 | 2 | 4 | 8 | 16 | 0 | The elevation of the surface. |
| id | string | - | The unique identifier for the DOM element. |
| radius | "sm" | "md" | sm | The border radius of the surface. |
| role | AriaRole | - | The ARIA role assigned to the element to improve accessibility. Example roles include "button", "navigation", "dialog", etc. |
| style | CSSProperties | - | Inline styles specified as a React-compatible CSS properties object. |