Shadcn.io is not affiliated with official shadcn/ui
Button with Left Icon
An outline button with left-aligned icon combining border styling with visual symbol recognition
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.
Button with Left Icon preview
Installation
Related Components
Text Only Outline
Basic border button without icon
Outline Right Icon
Border button with trailing icon
Standard Left Icon
Filled button with left icon
Link Left Icon
Minimal button with left icon
Loading Outline
Border button with spinner
Secondary Left Icon
Muted button with icon
FAQ
Was this page helpful?
Sign in to leave feedback.