Preview loads on approachPreview loads on approach
Exact source · clickable-card-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {ClickableCard} from '@astryxdesign/core/ClickableCard';
import {Stack} from '@astryxdesign/core/Layout';
import {Text, Heading} from '@astryxdesign/core/Text';
export default function ClickableCardShowcase() {
return (
<ClickableCard label="Settings" href="#" width={320}>
<Stack direction="vertical" gap={2}>
<Heading level={4}>Settings</Heading>
<Text type="body" color="secondary">
Click anywhere on this card to navigate. Nested buttons and links work
independently.
</Text>
</Stack>
</ClickableCard>
);
}
Usage
An interactive card for navigation or action targets. Nested interactive elements work independently.
Use for cards that navigate to a detail page or trigger a single action.
Nest buttons or links freely inside; they handle their own events.
Use for toggling selection; use SelectableCard for that.
Typed props
Prop
Type and behavior
label
string · required
Accessibility label.
onClick
(event: MouseEvent) => void
Click handler: fires on card surface only.
href
string
Navigation URL. Plain, new-tab, Cmd/Ctrl-click, and middle-click activation all follow the shared navigation rule described on the Linkhref prop.
