Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Button with Right Icon
An outline button with right-aligned icon creating directional flow within bordered secondary actions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Direction within borders—right icons guide bordered navigation. This React outline button positions lucide-react's ArrowRight icon after text using shadcn/ui's border-only styling with gap-2 spacing. Built with variant="outline" and trailing icon placement suggesting continuation or external navigation, it creates directional secondary action patterns. Perfect for "Continue to Next Step" in multi-step forms where outline styling signals optional progression, "View Full Report" in dashboard cards needing clear direction without primary emphasis, or "Learn More" in marketing sections where arrow indicates content expansion—the bordered right-icon combination guides users forward while maintaining secondary visual hierarchy.
Pattern created by @haydenbleasel