SuccessTickRipple

Celebration tick — a green medallion that drops in with a spring rebound while three radial-gradient rings ripple outward from its centre and a residual mint glow settles on the upper edges of the parent container. Layout contract: - The component renders a position: absolute; inset: 0 ripple field plus the medallion (in normal flow). The ripple field attaches to the nearest positioned ancestor — wrap this component in a parent that is position: relative and overflow: hidden to bound the celebration. The medallion's centre is the visual impact point. Tuning: - Override --tick-impact-x / --tick-impact-y on the parent to move the ripple origin (defaults to 50% / 50% of the parent). Animations are CSS-only and run once on mount. prefers-reduced-motion collapses to the final settled state and hides the ripple.

Usage

import { SuccessTickRipple, SuccessTickRippleProps } from "@desk/ui/components/success-tick-ripple";

Best practices

Wrap SuccessTickRipple in a position: relative; overflow: hidden parent — the ripple field is absolutely positioned and bleeds past an unbounded container.
It's decorative (aria-hidden) unless you pass aria-label, which exposes it as an img; animations are CSS-only and already collapse under prefers-reduced-motion.

Props

Prop	Type	Description
size	`number`	Pixel size of the medallion. Defaults to 64.
aria-label	`string`	Optional accessible label. When provided, the medallion is exposed to AT as an image with this label; otherwise it is decorative.
className	`string`	Extra classes for the medallion element.

Also exports

interfaceSuccessTickRippleProps