Button components

Installation

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

npx untitledui add button

Button examples

Below are examples and variations of this button component:

Link color buttons

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.

Icon leading buttons

Our button component accepts the iconLeading and iconTrailing props to add an icon to the button. These icons should be either a function component that accepts a className prop or a JSX element with a data-icon attribute.

In server components, where you cannot directly pass a function component as a prop, we recommend passing a JSX element with a data-icon attribute to apply the button icon styles to the icon.

Icon trailing buttons

Similar to the iconLeading prop, you can display a trailing icon by passing a function component or a JSX element with a data-icon attribute to the iconTrailing prop.

Icon only buttons

You can also display an icon only button by omitting the button children and passing an icon to the iconLeading or iconTrailing prop.

Please note that, it's recommended to pass an aria-label to the button when using an icon only button in order to provide a better experience for screen readers as the icons themselves do not provide any context.

Loading buttons

Our button component makes it easy to implement loading states with the isLoading prop. When enabled, the button automatically displays a spinner and becomes non-interactive to prevent multiple submissions. You can control whether to show the button text alongside the spinner using the showTextWhileLoading prop—this is particularly useful for providing context about what's happening. The loading spinner is automatically sized and styled to match your button's size and color variant.

Disabled buttons

Our button component handles disabled states through the isDisabled prop, which applies appropriate styling and removes all interactive functionality. When disabled, buttons automatically change their appearance to indicate that they are not clickable, change their cursor to a not-allowed cursor, and any associated actions or navigation are prevented. The disabled styling is consistent across all button variants and sizes, ensuring a cohesive user experience throughout your application while maintaining accessibility standards.

Primary buttons destructive

Our button component provides three destructive variants: primary-destructive, secondary-destructive, and tertiary-destructive. Each variant maintains 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 including icons, loading states, and disabled states, ensuring consistency across your application's destructive actions.