Action button
An icon in a rounded tile with a label beneath it — the quick-action affordance in mobile app headers and dashboards. Lay a row of them out in flex or grid; each fills its column and clears the 44px touch target on the tile.
Example
<div className="flex justify-between gap-4"> <ActionButton icon={<Plus />} label="Deposit" /> <ActionButton icon={<ArrowDownToLine />} label="Withdraw" /> <ActionButton icon={<ArrowUpFromLine />} label="Transfer" /> <ActionButton icon={<ArrowLeftRight />} label="Swap" /></div>Polymorphic through the render prop — pass a framework link to make the action navigate, exactly like TabBarItem and NavItem.
As a link
<ActionButton icon={<Plus />} label="Deposit" render={<a href="/wallet/deposit" aria-label="Deposit" />}/>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
icon | ReactNode | — | The glyph rendered inside the tile. |
label | ReactNode | — | Text below the tile; required. |
render | ReactElement | — | Render as a link or other element instead of a button. |
onClick | (event) => void | — | Standard button click handler when used as a button. |