# Icon Label Subtext Button

> Compound button with an icon tile, label and subtext, for actions that need a short explanation.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/icon-label-subtext-button
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/icon-label-subtext-button.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

```bash
npm install lucide-react
```

## Usage

```tsx title="components/icon-label-subtext-button-demo.tsx"
import { CloudUpload, CreditCard } from "lucide-react"

import { IconLabelSubtextButton } from "@/components/icon-label-subtext-button"

export default function IconLabelSubtextButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 p-8">
      <IconLabelSubtextButton label="Deploy" subtext="Push to production" />
      <IconLabelSubtextButton icon={<CloudUpload />} label="Upload files" subtext="Up to 2 GB each" />
      <IconLabelSubtextButton icon={<CreditCard />} label="Upgrade plan" subtext="From $9 / month" />
    </div>
  )
}
```

## Source

```tsx title="components/icon-label-subtext-button.tsx"
import * as React from "react"
import { Rocket } from "lucide-react"

import { cn } from "@/lib/utils"

export interface IconLabelSubtextButtonProps extends Omit<React.ComponentProps<"button">, "children"> {
  icon?: React.ReactNode
  label: string
  subtext: string
}

export function IconLabelSubtextButton({ icon, label, subtext, className, ...props }: IconLabelSubtextButtonProps) {
  return (
    <button
      className={cn(
        "group inline-flex items-center gap-3 rounded-xl border border-border bg-card py-2.5 pr-5 pl-2.5 text-left text-card-foreground shadow-xs",
        "transition-[background-color,transform,border-color] hover:border-primary/40 hover:bg-accent active:scale-[0.98]",
        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50",
        className
      )}
      {...props}
    >
      <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-transform duration-200 group-hover:scale-105 [&_svg]:size-5">
        {icon ?? <Rocket />}
      </span>
      <span className="flex flex-col leading-tight">
        <span className="text-sm font-semibold">{label}</span>
        <span className="mt-0.5 text-xs text-muted-foreground">{subtext}</span>
      </span>
    </button>
  )
}
```