## Import

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

## Live Editor

```jsx
<Surface elevation={2}>
  <div style={{ padding: 16 }}>This is a surface with elevation 2.</div>
</Surface>
```

## 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

```jsx
<div
  style={{
    display: "grid",
    gridTemplateColumns: "1fr 1fr",
    gap: 32,
    maxWidth: 400,
  }}
>
  <Surface elevation={0} style={{ padding: 16 }}>
    Elevation 0
  </Surface>
  <Surface elevation={1} style={{ padding: 16 }}>
    Elevation 1
  </Surface>
  <Surface elevation={2} style={{ padding: 16 }}>
    Elevation 2
  </Surface>
  <Surface elevation={4} style={{ padding: 16 }}>
    Elevation 4
  </Surface>
  <Surface elevation={8} style={{ padding: 16 }}>
    Elevation 8
  </Surface>
  <Surface elevation={16} style={{ padding: 16 }}>
    Elevation 16
  </Surface>
</div>
```

### Radius

```jsx
<div
  style={{
    display: "flex",
    gap: 16,
  }}
>
  <Surface elevation={2} radius="sm" style={{ padding: 16 }}>
    Radius sm
  </Surface>
  <Surface elevation={2} radius="md" style={{ padding: 16 }}>
    Radius md
  </Surface>
</div>
```

## Props

### Surface

| 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 | `"md" \ | "sm"` | `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. |