# hitArea

> The `hitArea()` style-mixin factory: an invisible `::after` box that grows a small control's pointer target to `--ui-target-size` on every side it falls short, keeping the visible control at its designed size.

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

Extends the host's pointer target to at least `--ui-target-size` in both axes, centred
on the host. With the default `"inset"` anchor each inset is clamped at zero, so a host
larger than the target keeps its own box, and the host must be `relative()`/`absolute()`.

## Signature

```ts
hitArea<Node extends Element = Element>(options?: HitAreaOptions): MixinDescriptor<Node, [styles: CSSStyles], ElementProps>
```

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

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options?` | `HitAreaOptions` | How the box anchors to its host. |

## Examples

```tsx
<button mix={[relative(), hitArea()]} aria-label={t("actions.remove")}><XIcon /></button>
```

```tsx
<button mix={[inlineFlex(), items("center"), justify("center"), hitArea({ anchor: "flex-center" })]} />
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/styles` too.

### HitAreaOptions

Options accepted by hitArea.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `anchor?` | `"inset" \| "flex-center"` | How the box finds its host. `"inset"` stretches it from the host's edges and needs a positioned host; `"flex-center"` draws a fixed target-size box that a flex host centres on its content, so it works however a consumer positions the host. |