Shadcn.io is not affiliated with official shadcn/ui
Button with Right Icon
An outline button with right-aligned icon creating directional flow within bordered secondary actions
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.
Button with Right Icon preview
Installation
Related Components
Outline Left Icon
Border button with leading icon
Text Only Outline
Basic border button without icon
Standard Right Icon
Filled button with trailing icon
Link Right Icon
Minimal button with trailing arrow
Rounded Outline
Pill-shaped border button
Secondary Right Icon
Muted button with trailing icon
FAQ
Was this page helpful?
Sign in to leave feedback.