FeedbackGenerated from the public API
ClickBurst
A short burst of shapes from a click, for the one place a product wants delight.
@luc/ui/motionLive preview
Eight rays on acknowledgement; scale the ray count with the size of the event, not with taste.
0 acknowledgements
<Button onClick={approve}>
<ClickBurst count={8} spread={22} />
Approve
</Button>Usage
import { ClickBurst } from "@luc/ui/motion";<Button onClick={approve}>
<ClickBurst count={8} spread={22} />
Approve
</Button>API
| Export | Kind | Signature |
|---|---|---|
ClickBurst | 6 documented props | ({ className, children, count, color, spread, length, duration, disabled, ...props }: ClickBurstProps) => import("@types/react").JSX.Element |
ClickBurst props
Type: ClickBurstProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
color? | string | undefined | — | Ray colour. Defaults to the theme accent. |
count? | number | undefined | — | Number of rays. Keep it small — 6–8 reads as a spark, 30 reads as confetti. |
disabled? | boolean | undefined | — | Suppress the effect (e.g. outside reduced motion contexts). |
duration? | number | undefined | — | Milliseconds the burst lives. |
length? | number | undefined | — | Ray length, in px. |
spread? | number | undefined | — | Peak travel of each ray, in px. |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Feedback
A press, a change, a selection — acknowledged without shouting.
Related