[ @sdxc/u/state ]
active
Sugar over when("&:active", input).
import { active } from "@sdxc/u/state";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:
<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:
<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.
u.at("md", u.active(u.bg("brand.solid")))Signature
u.active(input: UtilityInput<Node>)