# active

> Sugar over `when("&:active", input)`.

```ts
import { active } from "@sdxc/u/state";
```

Sugar over `when("&:active", input)`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.active(u.bg("brand.solid"))` | `css({ "&:active": { backgroundColor: "..." } })` |

## Examples

### Basic example

Wrap utilities in `active()` to apply them while the element is being pressed. Press and hold the button:

```tsx
<button
	type="button"
	mix={[
		bg("brand.solid"),
		fg("brand.onSolid"),
		active(scale(0.95)),
		transition("transform", { duration: 100 }),
		cursor("pointer"),
		...,
	]}
>
	Press me
</button>
```

### Combining with hover

Put `active()` after `hover()` so the pressed style wins while both apply. Hover the button, then press it:

```tsx
<button
	type="button"
	mix={[
		bg("brand.solid"),
		fg("brand.onSolid"),
		hover(bg("color.brand.700")),
		active(bg("color.brand.900")),
		transition("background-color"),
		cursor("pointer"),
		...,
	]}
>
	Add to cart
</button>
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.active(u.bg("brand.solid")))
```

## Signature

```ts
u.active(input: UtilityInput<Node>)
```