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.
Info Variant
Semibold title over a regular-weight description, with a trailing arrow-circle-right to signal forward navigation.
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.
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.
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.