FeedbackGenerated from the public API
DataChangeFlash
A background flash when a value changes, so a live number is noticed without a badge.
@luc/ui/motionLive preview
The flash is caused by the value changing, and the tone is the caller's — a change is not automatically good.
18.4 %
<DataChangeFlash value={volatility} tone="negative">
<Text variant="body">{volatility.toFixed(1)} %</Text>
</DataChangeFlash>Usage
import { DataChangeFlash } from "@luc/ui/motion";<DataChangeFlash value={volatility} tone="negative">
<Text variant="body">{volatility.toFixed(1)} %</Text>
</DataChangeFlash>API
| Export | Kind | Signature |
|---|---|---|
DataChangeFlash | 4 documented props | ({ className, value, tone, duration, children, ...props }: DataChangeFlashProps) => import("@types/react").JSX.Element |
DataChangeFlash props
Type: DataChangeFlashProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
children | ReactNode | — | |
duration? | number | undefined | — | How long the tint lasts, in ms. |
tone? | FlashTone | undefined | — | Semantic tint. Defaults to `neutral` — a change is not automatically good. |
value | string | number | null | undefined | — | The value being watched. A change (by `!==`, with NaN treated as equal) flashes. |
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