Shadcn.io is not affiliated with official shadcn/ui
Button with Text
A primary button with solid background color driving main user actions and conversions
Action demands attention. This React button uses shadcn/ui's default variant featuring bold filled background with primary color creating maximum visual prominence. Built with solid background, high contrast text, and hover state transitions, it establishes clear primary action patterns. Perfect for "Save Changes" in forms driving data persistence, "Get Started" in landing pages converting visitors to users, or "Add to Cart" in e-commerce completing purchase flows—the filled styling provides unmistakable emphasis for critical user journeys requiring immediate attention and action.
Button with Text preview
Installation
Related Components
Primary with Icon
Filled button with left icon
Outline Button
Border-only secondary button
Secondary Button
Muted background button
Link Button
Text-only minimal button
Destructive Button
Red filled dangerous action
Primary Right Icon
Filled button with trailing icon
FAQ
Was this page helpful?
Sign in to leave feedback.