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.
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 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.
Yes, pass title and it renders on the underlying button or anchor element, giving it a native tooltip.
Yes. Both ButtonProps (the button variant) and LinkProps (the href variant, rendered as an anchor) are exported from @properui/ui.
A component reference (e.g. iconLeading={ArrowRight}) cannot cross the server/client boundary and fails next build at prerender. From a server component, pass an element carrying data-icon instead, e.g. iconLeading={<ArrowRight data-icon="leading" />}.