React button components
Free React button components for Tailwind CSS: primary, accent, outline and ghost variants, icon buttons, split buttons, button groups, toggles and copy buttons.
A button system is mostly restraint: one primary action per view, a quiet secondary, and a ghost for everything else. These variants are tuned so that hierarchy is obvious at a glance, with press states, loading states and focus rings that never disappear.
Icon buttons carry their accessible label, split buttons keep the menu reachable by keyboard, and every variant reads the same design tokens, so a theme change restyles all of them at once.
Components 8
Motion 1
See them live
Galleries render these components with sample data in every state.
Frequently asked questions
How do I render a button as a link?
Pass render={<a href="/pricing" />} or a Next.js Link. The button keeps its styles and the element becomes a real anchor, which is better for SEO and middle click.
How do I show a loading state on a button?
Disable the button and place the spinner component before the label. Keep the label text so the width stays stable while the action runs.
Which variant should my main call to action use?
Use the default ink variant for the one action that matters on a screen, and the accent variant sparingly for brand moments such as a hero CTA.