# surfaceControl

> The raised fill a `surface` button or link draws: the surface token, the emphasis ink and the tactile control edge.

```ts
import { surfaceControl } from "@sdxc/ui/styles";
```

Paints a control as a raised surface with a transparent border, so it keeps the
footprint of its solid and outline siblings, and darkens the fill a step on hover.

## Signature

```ts
surfaceControl<Node extends Element = Element>(): UtilityMixin<Node>
```

Returns: A `css()` mixin ready for a control's `mix` prop.

## Examples

```tsx
<button mix={[when('&[data-variant="surface"]', surfaceControl())]}>{label}</button>;
```