CardButton

The CardButton component displays a responsive group of clickable cards, each acting as a button with an icon and optional label. Useful for selection panels, category pickers, or device options.

Basic Example

Simple icon-based selection interface.

Choose Device

Selected: desktop

Visual Styles

Cards change appearance when selected or hovered.

Unselected

Example

Selected

Example

Responsive Layout

Cards automatically wrap and scale for smaller screens.

Devices

Props

Supported properties and default values.

  • title?: string – Optional section heading displayed above the card group.
  • items: CardButtonItem[] – Array of objects containing icon, value, and optional label.
  • value: string – The currently selected card value.
  • onClick: (value: string) => void – Callback triggered when a card is clicked.
  • className?: string – Extends container styles for customization.

Context Example

Common usage inside a settings or preference panel.

Select Theme