Components
Loading preview...
The IconLabelSubtextButton is a custom shadcn/ui-based React component designed for actions that need extra context beyond a single label. Unlike a standard button, it combines an icon, a primary label, and a secondary subtext in a compact and accessible design. This makes it ideal for use cases like downloads (with file size info), uploads (with format hints), or exports (with row counts). It supports multiple variants (default, outline, ghost) and sizes (sm, md, lg) to adapt to different layouts. The button also has built-in states for loading (with a spinner) and success (with a check icon), plus an optional badge for notifications and an optional tooltip for additional context. By leveraging Tailwind utilities and shadcn/ui primitives, this component stays consistent with modern UI patterns while being flexible, reusable, and user-friendly.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/icon-label-subtext-buttonimport IconLabelSubtextButton from "@/components/ui/icon-label-subtext-button"
import { DownloadCloud, Loader2, Check } from "lucide-react";
export default function DemoIconLabelSubtextButton() {
return (
<div className="flex flex-col gap-4 mx-auto">
<div className="flex gap-4 items-center">
<IconLabelSubtextButton
icon={<DownloadCloud />}
label="Download"
subtext="File size: 12MB"
onClick={() => alert("Downloading...")}
/>
<IconLabelSubtextButton
icon={<DownloadCloud />}
label="Export CSV"
subtext="Rows: 12,341"
variant="outline"
size="lg"
badge={"NEW"}
/>
<IconLabelSubtextButton
icon={<DownloadCloud />}
label="Save"
subtext="Auto-save enabled"
variant="ghost"
size="sm"
tooltip="Saves your current draft to cloud storage"
/>
</div>
<div className="flex gap-4 items-center">
<IconLabelSubtextButton icon={<DownloadCloud />} label="Upload" subtext=".png, .jpg only" loading />
<IconLabelSubtextButton icon={<DownloadCloud />} label="Sent" subtext="Delivered" success />
</div>
<p className="text-sm text-muted-foreground">
Use cases: downloads, uploads, attachments, contextual actions (e.g., "Add — 3 items"), or any place where a short
caption helps reduce ambiguity.
</p>
</div>
);
}