THEME
MOTION
HAPTIC
SOUND
STATUSTILE
MPC-style tile: icon + uppercase title + tiny subtitle. Optional tappable.
Live demo
Import
import { StatusTile } from '@cathode-ui/react';Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
title | string | — | yes | |
subtitle | string | — | yes | |
icon | ReactNode | — | yes | |
accent | PillAccent | info | — | |
active | boolean | false | — | |
onClick | () => void | — | — | Makes the whole tile a press target. |
Examples
display
<StatusTile title="STATUS" subtitle="HEALTHY" icon={<IconCheck weight="bold" />} active accent="success" />button
<StatusTile title="ACTION" subtitle="TAP TO RUN" icon={<IconSparkle />} onClick={handler} />Accessibility
Role: button (when onClick) / region
Feedback
| Haptic | tap |
| Sound | click |
Motion states
idle · press