Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Button with Left Icon
An outline button with left-aligned icon combining border styling with visual symbol recognition
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Borders meet symbols—icons clarify bordered actions. This React outline button pairs shadcn/ui's border-only styling with lucide-react icons positioned left of text using gap-2 spacing. Built with variant="outline" and Mail icon creating recognizable secondary action patterns, it balances visual restraint with clear intent communication. Perfect for "Send Email" in contact forms where action needs clarity without primary emphasis, "Download PDF" in document viewers requiring obvious function with subtle styling, or "Share Link" in content cards where icon reinforcement helps quick scanning—the bordered icon-text combination provides sufficient prominence for supporting actions.
Pattern created by @haydenbleasel