Buttons allow users to perform actions and choose with a single tap.
NextUI exports 2 button-related components:
- Button: The main component to display a button.
- ButtonGroup: A wrapper component to display a group of buttons.
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
You can add icons to the
Button by passing the
You can also display a button without text by passing the
isIconOnly prop and the desired icon as
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.
You can also use the
useButton hook to create your own button component.
ButtonGroup component also accepts the
isDisabled prop to disable all buttons inside it.
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
See the Dropdown component for more details.
Button has the following attributes on the
- data-hover: When the button is being hovered. Based on useHover
- data-focus: When the button is being focused. Based on useFocusRing.
- data-focus-visible: When the button is being focused with the keyboard. Based on useFocusRing.
When the button is disabled. Based on
- data-pressed: When the button is pressed. Based on usePress
When the button is loading. Based on
- Button has role of
- Keyboard event support for Space and Enter keys.
- Mouse and touch event handling, and press state management.
- Keyboard focus management and cross browser normalization.
We recommend to read this blog post about the complexities of building buttons that work well across devices and interaction methods.
|children||The content to display in the button.||-|
|variant||The button appearance style.|
|color||The button color theme.|
|size||The button size.|
|radius||The button border radius.||-|
|startContent||The button start content.||-|
|endContent||The button end content.||-|
|spinner||Spinner to display when loading.||-|
|spinnerPlacement||The spinner placement.|
|fullWidth||Whether the button should take the full width of its parent.|
|isIconOnly||Whether the button should have the same width and height.|
|isDisabled||Whether the button is disabled.|
|isLoading||Whether the button is loading.|
|disableRipple||Whether the button should display a ripple effect on press.|
|disableAnimation||Whether the button should display animations.|
|onPress||Handler called when the press is released over the target.|
|onPressStart||Handler called when a press interaction starts.|
|onPressEnd||Handler called when a press interaction ends, either over the target or when the pointer leaves the target.|
|onPressChange||Handler called when the press state changes.|
|onPressUp||Handler called when a press is released over the target, regardless of whether it started on the target or not.|
|onKeyDown||Handler called when a key is pressed.|
|onKeyUp||Handler called when a key is released.|
|onClick||The native button click event handler (Deprecated) use onPress instead.|
|children||The buttons to display.||-|
|variant||The buttons appearance style.|
|color||The buttons color theme.|
|size||The buttons size.|
|radius||The buttons border radius.|
|fullWidth||Whether the buttons should take the full width.|
|isDisabled||Whether the buttons are disabled.|