Build · New

Button Card

A large tappable card that runs one action: settings shortcuts, onboarding choices and dashboard actions. Its headline is its name for screen readers.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/button-card

Dependencies it brings: @base-ui/react, @phosphor-icons/react

Usage

import { BellIcon } from "@phosphor-icons/react/ssr";
import { ButtonCard } from "@/components/ui/button-card";

<ButtonCard
  leadingIcon={BellIcon}
  headline="Notifications"
  supportingText="Email, push and SMS"
  onClick={openNotifications}
/>

Examples

Card types

horizontal (default) with a caret at the inline end, vertical centered, vertical-wide from the inline start, and big-wide with a footer holding an arrow and a logo. The width comes from the layout.

Onboarding choices

Vertical cards for parallel choices; each runs one action and moves to the next step. Press one.

Dashboard actions

big-wide cards with a logo. Amounts and counts follow the numerals setting; the arrow flips in Arabic, the logo doesn't.

Links and disabled

A card that navigates is a link: pass render={<a href=… />}. disabled switches it off; say why in the supporting text.

API reference

ButtonCard

Any other Base UI Button prop passes through (onClick, type…).

Prop	Type	Default	Description
`cardType`	`"horizontal" \| "vertical" \| "vertical-wide" \| "big-wide"`	`"horizontal"`	Figma's Card type.
`headline`	`ReactNode`		Required. Figma's Headline, and the card's name for screen readers.
`overline`	`ReactNode`		Figma's Overline: a small line above the headline, shown when set.
`supportingText`	`ReactNode`		Figma's Supporting text: the description screen readers read after the name.
`leadingIcon`	`IconComponent`		Figma's Leading icon. Not on `big-wide`, as in Figma.
`trailingIcon`	`IconComponent \| null`	`CaretRightIcon / ArrowRightIcon`	The trailing arrow; flips in Arabic. `null` hides it.
`logo`	`ReactNode`		The `big-wide` footer logo at the inline end. Never mirrors.
`disabled`	`boolean`	`false`	State = Disabled.
`render`	`ReactElement`		A link with the card's look (`<a>` or `<Link>`); it keeps its semantics.
`className`	`string`		Extra classes, such as a width (`w-160`).

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Moves focus to the card and shows the ring around it.
`EnterSpace`	Runs the action (Enter only for a link card).

ARIA

A native button (or link with render); aria-labelledby points at the headline so the name stays short, and aria-describedby at the overline and supporting text.
Icons and the logo are decorative inside the card; pass label={null} to the Kanz logo.
One card, one action: don't nest buttons or links inside it.

Arabic and RTL notes

Mirrors

The whole card mirrors: the icon at the inline start (the right), the arrow at the end (the left), and text starting from the right.
CaretRight and ArrowRight flip through <Icon>, so they point forward in both languages.

Does not mirror

Logos never mirror, nor do non-directional icons (bell, gear).

Numerals: Amounts and counts in the texts (“Pay 3 bills”) are formatted with formatNumber and follow the numerals setting.
Arabic typography: Overline label-12, headline body-16 Medium, supporting text body-12. The card grows with its text, so Arabic never clips.
Mixed-direction text: A currency or Latin name inside Arabic text (“1840 ريال”, “عبر Apple Pay”) renders correctly; identifiers go in <bdi dir="ltr">.

All components ›