Versatile button components for every use case. From solid and outline to gradient, icon, loading, and social login buttons.
Solid Variants
Standard filled buttons with different color schemes.
| 1 | <button "color:#79c0ff">className="rounded-lg bg-violet-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-violet-700">Primary</button> |
| 2 | <button "color:#79c0ff">className="rounded-lg bg-slate-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-slate-800">Secondary</button> |
| 3 | <button "color:#79c0ff">className="rounded-lg bg-emerald-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-emerald-700">Success</button> |
| 4 | <button "color:#79c0ff">className="rounded-lg bg-red-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-red-700">Danger</button> |
| 5 | <button "color:#79c0ff">className="rounded-lg bg-amber-500 px-5 py-2.5 text-sm font-medium text-white hover:bg-amber-600">Warning</button> |
| 6 | <button "color:#79c0ff">className="rounded-lg bg-sky-600 px-5 py-2.5 text-sm font-medium text-white hover:bg-sky-700">Info</button> |
Outline Variants
Bordered buttons with transparent backgrounds.
| 1 | <button "color:#79c0ff">className="rounded-lg border-2 border-violet-600 px-5 py-2.5 text-sm font-medium text-violet-400 hover:bg-violet-600 hover:text-white">Primary</button> |
| 2 | <button "color:#79c0ff">className="rounded-lg border-2 border-emerald-500 px-5 py-2.5 text-sm font-medium text-emerald-400 hover:bg-emerald-500 hover:text-white">Success</button> |
| 3 | <button "color:#79c0ff">className="rounded-lg border-2 border-red-500 px-5 py-2.5 text-sm font-medium text-red-400 hover:bg-red-500 hover:text-white">Danger</button> |
| 4 | <button "color:#79c0ff">className="rounded-lg border-2 border-sky-500 px-5 py-2.5 text-sm font-medium text-sky-400 hover:bg-sky-500 hover:text-white">Info</button> |
| 5 | <button "color:#79c0ff">className="rounded-lg border-2 border-amber-500 px-5 py-2.5 text-sm font-medium text-amber-400 hover:bg-amber-500 hover:text-white">Warning</button> |
Gradient Buttons
Eye-catching buttons with gradient backgrounds.
| 1 | <button "color:#79c0ff">className="rounded-lg bg-gradient-to-r from-violet-600 to-indigo-600 px-5 py-2.5 text-sm font-medium text-white shadow-lg shadow-violet-500/25 hover:shadow-violet-500/40">Purple Indigo</button> |
| 2 | <button "color:#79c0ff">className="rounded-lg bg-gradient-to-r from-pink-500 to-rose-500 px-5 py-2.5 text-sm font-medium text-white shadow-lg shadow-pink-500/25">Pink Rose</button> |
| 3 | <button "color:#79c0ff">className="rounded-lg bg-gradient-to-r from-emerald-500 to-teal-500 px-5 py-2.5 text-sm font-medium text-white shadow-lg shadow-emerald-500/25">Emerald Teal</button> |
| 4 | <button "color:#79c0ff">className="rounded-lg bg-gradient-to-r from-amber-500 to-orange-500 px-5 py-2.5 text-sm font-medium text-white shadow-lg shadow-amber-500/25">Amber Orange</button> |
| 5 | <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-600 via-purple-500 to-pink-500 px-6 py-3 text-sm font-bold text-white shadow-xl shadow-purple-500/30">Multi-stop Gradient</button> |
| 6 | <button "color:#79c0ff">className="rounded-full bg-gradient-to-r from-cyan-500 to-blue-600 px-8 py-3 text-sm font-bold text-white shadow-xl shadow-cyan-500/30">Rounded Gradient</button> |
Icon Buttons
Buttons with icons, icon-only buttons, and various icon placements.
| 1 | <!-- Leading Icon --> |
| 2 | <button "color:#79c0ff">className="flex items-center gap-2 rounded-lg bg-violet-600 px-5 py-2.5 text-sm font-medium text-white"> |
| 3 | <PlusIcon /> Add Item |
| 4 | </button> |
| 5 | <!-- Trailing Icon --> |
| 6 | <button "color:#79c0ff">className="flex items-center gap-2 rounded-lg border border-slate-600 px-5 py-2.5 text-sm font-medium text-slate-300"> |
| 7 | Download <ArrowDownIcon /> |
| 8 | </button> |
| 9 | <!-- Icon Only --> |
| 10 | <button "color:#79c0ff">className="flex h-10 w-10 items-center justify-center rounded-lg bg-violet-600 text-white"> |
| 11 | <HeartIcon /> |
| 12 | </button> |
Loading & Animated Buttons
Buttons with loading spinners, pulse effects, and animated states.
| 1 | <button "color:#79c0ff">className="flex items-center gap-2 rounded-lg bg-violet-600 px-5 py-2.5 text-sm font-medium text-white"> |
| 2 | <svg "color:#79c0ff">className="h-4 w-4 animate-spin" viewBox="0 0 24 24"> |
| 3 | <circle "color:#79c0ff">className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" /> |
| 4 | <path "color:#79c0ff">className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" /> |
| 5 | </svg> |
| 6 | Processing... |
| 7 | </button> |
| 8 | <button disabled "color:#79c0ff">className="cursor-not-allowed rounded-lg bg-violet-600/50 px-5 py-2.5 text-sm font-medium text-white/70">Disabled</button> |
| 9 | <button "color:#79c0ff">className="animate-pulse rounded-lg bg-violet-600 px-5 py-2.5 text-sm font-medium text-white">Pulsing</button> |
Social Login Buttons
Pre-styled buttons for popular social login providers.
| 1 | <button "color:#79c0ff">className="flex w-full items-center justify-center gap-3 rounded-lg bg-white px-5 py-2.5 text-sm font-medium text-gray-700 shadow-sm border border-gray-300 hover:bg-gray-50"> |
| 2 | <GoogleIcon /> Continue with Google |
| 3 | </button> |
| 4 | <button "color:#79c0ff">className="flex w-full items-center justify-center gap-3 rounded-lg bg-[#1877F2] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#166FE5]"> |
| 5 | <FacebookIcon /> Continue with Facebook |
| 6 | </button> |
| 7 | <button "color:#79c0ff">className="flex w-full items-center justify-center gap-3 rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900"> |
| 8 | <AppleIcon /> Continue with Apple |
| 9 | </button> |
| 10 | <button "color:#79c0ff">className="flex w-full items-center justify-center gap-3 rounded-lg bg-[#24292F] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#1B1F23]"> |
| 11 | <GithubIcon /> Continue with GitHub |
| 12 | </button> |
Button Groups
Group related buttons together with connected styling.
| 1 | <div "color:#79c0ff">className="inline-flex rounded-lg border border-slate-700 overflow-hidden"> |
| 2 | <button "color:#79c0ff">className="bg-violet-600 px-4 py-2 text-sm font-medium text-white">Left</button> |
| 3 | <button "color:#79c0ff">className="border-x border-slate-700 px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800">Center</button> |
| 4 | <button "color:#79c0ff">className="px-4 py-2 text-sm font-medium text-slate-300 hover:bg-slate-800">Right</button> |
| 5 | </div> |
Floating Action Buttons
Add
Chat
Edit
Settings
Extended FAB
FAB-style buttons typically used for primary actions.
| 1 | <button "color:#79c0ff">className="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-r from-violet-600 to-indigo-600 text-white shadow-xl shadow-violet-500/30 transition-all hover:scale-110"> |
| 2 | <PlusIcon "color:#79c0ff">className="h-6 w-6" /> |
| 3 | </button> |
| 4 | <button "color:#79c0ff">className="flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-r from-pink-500 to-rose-500 text-white shadow-xl shadow-pink-500/30 transition-all hover:scale-110"> |
| 5 | <ChatIcon "color:#79c0ff">className="h-6 w-6" /> |
| 6 | </button> |