Preview
Code
Free and open-source React button components built for modern applications and websites. These buttons are built using React Aria and styled with Tailwind CSS.
Installation
CLI
Manual
npx properui@latest add buttonsFree and open-source React button components built for modern applications and websites. These buttons are built using React Aria and styled with Tailwind CSS.
npx properui@latest add buttonsButtons 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 five sizes: "xs" (extra small), "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.