Button Card
A clickable, card-shaped button. Unlike Action Card (a banner whose children are the buttons), the entire Button Card surface is the interactive target. Three variants (Date, Info, Info-icon) × two tones (Primary, Secondary) × four native states (Default, Hover, Focused, Disabled).
When to use
Date Variant
Two semibold labels centered in a compact surface — ideal for day + month chips, version selectors, or any short two-line label.
<ButtonCard Variant="ButtonCard.CardVariant.Date"
Tone="ButtonCard.CardTone.Primary"
Title="24"
Description="Dec" />
<ButtonCard Variant="ButtonCard.CardVariant.Date"
Tone="ButtonCard.CardTone.Secondary"
Title="24"
Description="Dec" />
<ButtonCard Variant="ButtonCard.CardVariant.Date"
Tone="ButtonCard.CardTone.Primary"
Title="24"
Description="Dec"
Disabled="true" />Info Variant
Semibold title over a regular-weight description, with a trailing arrow-circle-right to signal forward navigation.
<ButtonCard Variant="ButtonCard.CardVariant.Info"
Tone="ButtonCard.CardTone.Primary"
Title="Register"
Description="Start registering customer"
OnClick="HandleRegister" />
<ButtonCard Variant="ButtonCard.CardVariant.Info"
Tone="ButtonCard.CardTone.Secondary"
Title="Register"
Description="Start registering customer"
Disabled="true" />Info-icon Variant
Adds a 48x48 leading badge before the text block. Use LeadingInitials for initials, or pass a custom Leading slot for images, icons, or composed badges.
<ButtonCard Variant="ButtonCard.CardVariant.InfoIcon"
Tone="ButtonCard.CardTone.Primary"
Title="Register"
Description="Start registering customer"
LeadingInitials="OR"
OnClick="HandleRegister" />
<ButtonCard Variant="ButtonCard.CardVariant.InfoIcon"
Tone="ButtonCard.CardTone.Secondary"
Title="Register"
Description="Start registering customer"
LeadingInitials="OR" />Interactive States
Hover and Focused states are driven by native CSS (:hover, :focus-visible) — hover the cards below or tab into them to see the transitions.
Link Mode (Href)
Setting Href renders the card as an anchor instead of a button. Matches the InfoCard / MediaCard pattern for navigational cards.
<ButtonCard Variant="ButtonCard.CardVariant.Info"
Tone="ButtonCard.CardTone.Primary"
Title="Docs"
Description="Read the component guide"
Href="/docs" />
<ButtonCard Variant="ButtonCard.CardVariant.InfoIcon"
Tone="ButtonCard.CardTone.Secondary"
Title="Buttons"
Description="Browse all button variants"
LeadingInitials="B"
Href="/buttons" />Customization
Pass a custom Leading RenderFragment for an icon or image, or set ShowTrailingIcon=false to drop the arrow when the card isn't navigational.
<ButtonCard Variant="ButtonCard.CardVariant.InfoIcon"
Tone="ButtonCard.CardTone.Secondary"
Title="Calendar"
Description="Pick a date">
<Leading>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="3" y="5" width="18" height="16" rx="2" />
<path d="M3 9h18M8 3v4M16 3v4" />
</svg>
</Leading>
</ButtonCard>
<ButtonCard Variant="ButtonCard.CardVariant.Info"
Tone="ButtonCard.CardTone.Secondary"
Title="Select option"
Description="No forward navigation here"
ShowTrailingIcon="false" />