Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Button with Text
An outline button variant with border styling for secondary actions balancing visibility and restraint
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel