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

## 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 | `"sm" \ | "md"` | `sm` | The border radius of the surface. |
| role | `AriaRole` | - | The ARIA role assigned to the element to improve accessibility.&#xA;Example roles include "button", "navigation", "dialog", etc. |
| style | `CSSProperties` | - | Inline styles specified as a React-compatible CSS properties object. |