Shadcn.io is not affiliated with official shadcn/ui
Button with Right Icon
A primary button with right-aligned icon creating forward momentum within filled background
Direction meets prominence—right icons propel primary actions forward. This React button positions lucide-react's ArrowRight icon after text using shadcn/ui's solid primary styling with gap-2 spacing. Built with filled background and trailing icon suggesting continuation or completion, it creates compelling directional primary action patterns. Perfect for "Continue to Payment" in checkout flows driving conversion, "Get Started" in onboarding sequences initiating user journeys, or "Next Step" in multi-step forms advancing workflow progress—the filled right-icon combination creates unstoppable forward momentum while commanding maximum attention.
Button with Right Icon preview
Installation
Related Components
Primary Left Icon
Filled button with leading icon
Text Only Primary
Basic filled button without icon
Outline Right Icon
Border button with trailing icon
Link Right Icon
Minimal button with trailing arrow
Rounded Primary
Pill-shaped filled button
Secondary Right Icon
Muted button with trailing icon
FAQ
Was this page helpful?
Sign in to leave feedback.