Button

Buttons allow users to perform actions and choose with a single tap.

Installation

npx nextui-cli@latest add button

The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.

Import

NextUI exports 2 button-related components:

Usage

Disabled

Sizes

Radius

Colors

Variants

Loading

Pass the isLoading prop to display a Spinner component inside the button.

You can also customize the loading spinner by passing the a custom component to the spinner prop.

With Icons

You can add icons to the Button by passing the startContent or endContent props.

Icon Only

You can also display a button without text by passing the isIconOnly prop and the desired icon as children .

Custom Styles

You can customize the Button component by passing custom Tailwind CSS classes to the component slots.

Custom class names will override the default ones thanks to Tailwind Merge library. It means that you don't need to worry about class conflicts.

Custom Implementation

You can also use the useButton hook to create your own button component.

Button Group

Group Disabled

The ButtonGroup component also accepts the isDisabled prop to disable all buttons inside it.

Group Use case

A common use case for the ButtonGroup component is to display a group of two buttons one for the selected value and another for the dropdown .

See the Dropdown component for more details.

Data Attributes

Button has the following attributes on the base element:

Accessibility

We recommend to read this blog post about the complexities of building buttons that work well across devices and interaction methods.