Preview
Code
Button components
A button is an interactive element that results in an action described in it. They're one of the most essential components in modern UI design, so it's important to get right. We've designed and built the ultimate button components using React Aria and Tailwind CSS. Learn how to use these FREE code button components in your projects.
Installation
You can add this button component using our CLI or manually:
CLI
Manual
npx untitledui add button
Button examples
Below are examples and variations of this button component:
FAQs
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.