Skip to main content

​
Button components

GitHubReact Aria
High-performance, accessible React button components built for modern applications and websites. These buttons are built using React Aria and styled with Tailwind CSS.

​
Example

​
Installation

You can add this button component using our CLI or manually:

​
Variations

Below are the different styles and states available for the Button component:

​
Primary

​
Secondary

​
Tertiary

We’ve designed our button components to be “hybrid,” meaning they can function as either a link or a standard button with ease. This offers several benefits, for example, there are many situations where you might want a link that behaves like a button, or a button that acts as a link. These two essential components work interchangeably, so it was important for us to make them easy to use. You can turn the button component into an anchor by simply passing the href prop. When the href prop is present, the button component uses the Link component from React Aria under the hood instead of Button. This means you can pass any props or attributes that an anchor tag would accept when href is provided.

​
Destructive primary

Our button component provides destructive variants that maintain the same interaction patterns as their non-destructive counterparts while applying appropriate warning colors and styling. You can use these variants just like regular buttons, and they support all the same features.

​
Destructive secondary

​
Destructive tertiary

​
Close X

​
FAQs

Please refer to our frequently asked questions page for more.
Buttons support multiple color variants including primary, secondary, tertiary, primary-destructive, secondary-destructive, tertiary-destructive, link-gray, link-color, and link-destructive. The default color is primary.
Buttons support four sizes: sm (small), md (medium), lg (large), and xl (extra large). You can set the size using the size prop, with sm being the default size.
Yes, you can add icons using the iconLeading or iconTrailing props. These props accept either React components or React elements. Icons are automatically sized and styled to match the button size.
You can disable a button by setting the isDisabled prop to true. This will apply disabled styling, prevent user interaction, and disable any associated links or actions.
Yes, you can use buttons for navigation by providing an href prop. When an href is provided, the button renders as an anchor tag while maintaining button styling.
You can handle loading states using the isLoading prop. When set to true, the button displays a loading spinner and becomes non-interactive. Use showTextWhileLoading to keep the button text visible during loading.
You can make a button take the full width by adding the w-full Tailwind class to the className prop. The button component accepts standard HTML attributes and Tailwind classes.