Button with Left Icon

Icons clarify intent instantly. This React link button pairs shadcn/ui's minimal link variant with lucide-react icons positioned left of text using gap-2 spacing. Built with transparent background and primary-colored icon-text combination, it creates recognizable inline action patterns. Perfect for "Download PDF" with Download icon in document viewers, "Send Email" with Mail icon in contact forms, or "Open Settings" with Settings icon in user menus—the icon reinforcement speeds recognition while maintaining the subtle visual weight of link-styled buttons.

Button with Left Icon preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/button-link-2.json

npx shadcn@latest add https://www.shadcn.io/r/button-link-2.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/button-link-2.json

bunx shadcn@latest add https://www.shadcn.io/r/button-link-2.json

Related Components

FAQ