THEME
MOTION
HAPTIC
SOUND
PILL
Icon+text nav/action button. `active` marks the current tab; pass an icon node for the icon+text treatment.
Live demo
Import
import { Pill } from '@cathode-ui/react';Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
title | string | — | yes | |
icon | ReactNode | — | — | |
accent | PillAccent ('info'|'success'|'warning'|'danger'|'accent'|'amber'|'pink'|'purple'|'teal'|'grey') | info | — | |
active | boolean | false | — | Marks the current tab/state; visually highlights and disables click. |
disabled | boolean | false | — | |
feedback | boolean | true | — | Local override for haptic+sound. |
onClick | () => void | — | — |
Examples
nav-active
<Pill title="HOME" active accent="amber" />with-icon
<Pill title="SAVE" icon={<IconCheck weight="bold" />} onClick={save} accent="success" />Accessibility
Role: button
- aria-label if title is unclear
Feedback
| Haptic | tap |
| Sound | click |
Motion states
idle · press