Shadcn.io is not affiliated with official shadcn/ui
Button with Text
An outline button variant with border styling for secondary actions balancing visibility and restraint
Borders create hierarchy without weight. This React button uses shadcn/ui's outline variant featuring border-only styling with transparent background creating visual separation while maintaining subtle presence. Built with variant="outline" applying border and hover state transitions, it establishes clear secondary action patterns. Perfect for "Cancel" in modal footers, "Learn More" alongside primary CTAs, or "View Details" in card interfaces—the bordered styling provides sufficient emphasis for optional actions without competing with primary buttons for attention.
Button with Text preview
Installation
Related Components
Outline with Icon
Border button with left icon
Standard Button
Primary filled button variant
Secondary Button
Muted background button
Link Button
Text-only minimal button
Destructive Button
Red button for dangerous actions
Outline Right Icon
Border button with trailing icon
FAQ
Was this page helpful?
Sign in to leave feedback.