Skip to content
← Inventory

IconCard

A selectable card pairing an icon over a label, for option pickers such as property-type or category choices; renders a native button and forwards its props.

Usage

import { IconCard, IconCardProps } from "@desk/ui/components/icon-card";

Best practices

  • IconCard is itself a native <button> — wire selected/onClick and drive a single-select group in state; don't nest it in another button or anchor.

  • Pass a Lucide component to icon (e.g. HomeIcon), not a rendered element <HomeIcon /> — it is handed to the internal Icon for consistent sizing/stroke.

  • Use IconCard for compact icon-over-label option pickers (property type, category); for a content container with header/body reach for Card, and for a settings row use SettingsCard.

Props

PropTypeDefaultDescription
icon(required)LucideIcon

The icon to display

label(required)string

Label text below the icon

selectedboolean

Whether the card is currently selected

testIdstring

Also exports

  • interfaceIconCardProps

Composition

Builds on

Icon