XDSClickableCard@xds/core · ClickableCard
Usage
An interactive card for navigation or action targets. Nested interactive elements work independently.Best practices
| Guidance | Practices |
|---|---|
| Do | Use for cards that navigate to a detail page or trigger a single action. |
| Do | Nest buttons or links freely inside — they handle their own events. |
| Don't | Use for toggling selection — use SelectableCard for that. |
Anatomy
| Element | Description | |
|---|---|---|
| Container | required | Interactive div with hover/focus/active states. |
| Content | required | Children, which may include nested interactive elements. |
Import
ts
Props
| Prop | Type | Description |
|---|---|---|
labelrequired | string | Accessibility label. |
onClick | (event: MouseEvent) => void | Click handler — fires on card surface only. |
href | string | Navigation URL. |
target | string (default: '_self') | Link target. |
isDisabled | boolean (default: false) | Disables the card. |
children | ReactNode | Card content. |
padding | SpacingStep (default: 4) | Inner padding. |
variant | 'default' | 'transparent' | 'muted' | 'blue' | 'cyan' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'yellow' (default: 'default') | Background color variant. |
width | SizeValue | Card width. |
height | SizeValue | Card height. |
maxWidth | SizeValue | Maximum card width. |