Card Button
Card Buttons promote navigation to a related part of the app without cluttering a screen with repetitive buttons. They work best in groups of two or three, each filling an equal share of the available width.
preview
props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | required | The primary title of the card. |
children | ReactNode | required | The icon rendered on the left. Always use duotone weight. |
supportingText | string | — | Optional subtitle below the label. Omit to hide. |
disabled | boolean | false | Prevents interaction and reduces opacity. |
onClick | () => void | — | Called when the card is pressed. |
usage
Use card buttons to guide users toward related areas of the app without overwhelming a screen. They work best in groups of two or three, laid out in an equal-width row. Each card should have a different icon colour — always from the secondary palette or core colours, never sentiment colours — but always the same duotone weight. Do not place card buttons on a primary or white surface; they are designed for secondary and tertiary backgrounds.
When to use
- Navigating to a related screen from within a task — e.g. Overview → Registration
- Initiating a multi-step flow from a dashboard or summary view
Do not use
- For simple actions like "Publish event" — use a Button instead
- Nested inside other components
- On a primary or white surface — use a secondary or tertiary background
- With sentiment colours (red, green, amber) on the icon
DoUse in equal-width groups on a secondary background, with different icon colours
Don’tUse on a white or primary surface, or as a lone card
states
DefaultFrosted glass, light shadow
HoverSolid white, stronger shadow, subtle border
FocusFocus ring shown on keyboard navigation only