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

import { Button } from "@nextui-org/react";


The default Button contains an animation effect.


Unusable and un-clickable Button.


Change the size of the entire Button including padding, font-size and border with the size property.


You can change the color of the Button with the property color.


You can add a shadow effect with the property shadow.


You can add a Loading child element to the Button and disable the interactions using the 'disabled' property.


You can change the full style to a bordered Button with the bordered property.


You can completely round the corners of any type of Button with the rounded property.


You can change the full style to a ghost button with the ghost property.


You can change the full style to a flat button with the flat property.

Note: gradient variant is not supported with the flat mode.


You can change the full style to a light button with the light property.

Note: gradient variant is not supported with the light mode.


NextUI doesn't use any library or icon font by default, with this we give the freedom to use the one you prefer. In the following example we use React Iconly


Button Props

colorNormalColorsChange button colordefault
sizeNormalSizesChange button sizemd
disabledbooleanDisable buttonfalse
borderedbooleanBordered buttonfalse
flatbooleanFlat buttonfalse
roundedbooleanRounded buttonfalse
ghostbooleanThe opposite colorfalse
shadowbooleanDisplay shadow effectfalse
ripplebooleanDisplay drip animationtrue
autobooleanAutoscale button widthfalse
animatedbooleanDisplay drip and scale animationtrue
borderWeightNormalWeightsBorder weight for bordered buttonnormal
autoFocusbooleanAutomatically focus buttonfalse
onClickMouseEventHandlerButton click handler-
iconReactNodeShow icon in button-
iconRightReactNodeShow icon on the other side of the button-
typebutton reset submitNative type of button elementbutton
refRef<HTMLButtonElement | null>forwardRef-
cssStitches.CSSOverride Default CSS style-
iconLeftCssStitches.CSSOverride icon CSS style-
iconRightCssStitches.CSSOverride iconRight CSS style-
askeyof JSX.IntrinsicElementsChanges which tag component outputsbutton
...'id', 'className', ...Button native props-

Button Events

onClick deprecated(e: PressEvent) => voidButton click handler-
onPress(e: PressEvent) => voidHandler that is called when the press is released over the button.-
onPressUp(e: PressEvent) => voidHandler that is called when a press is released over the button, regardless of whether it started on the button or not.-
onPressStart(e: PressEvent) => voidHandler that is called when a press interaction starts.-
onPressEnd(e: PressEvent) => voidHandler that is called when a press interaction ends, either over the button or when the pointer leaves the button.-
onPressChange(isPressed: boolean) => voidHandler that is called when the press state changes.-

Button Accessibility Props

idstringThe element's unique identifier. See MDN-
excludeFromTabOrderbooleanWhether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.-
aria-expandedbooleanIndicates whether the element, or another grouping element it controls, is currently expanded or collapsed.-
aria-haspopupboolean menu listbox tree grid dialogIndicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.-
aria-controlsstringIdentifies the element (or elements) whose contents or presence are controlled by the current element.-
aria-pressedbooleanIndicates the current "pressed" state of toggle buttons.-
aria-labelstringDefines a string value that labels the current element-
aria-labelledbystringIdentifies the element (or elements) that labels the current element-
aria-describedbystringIdentifies the element (or elements) that describes the object.-
aria-detailsstringIdentifies the element (or elements) that provide a detailed, extended description for the object.-

Button types

Normal Colors

type NormalColors =
  | "default"
  | "primary"
  | "secondary"
  | "success"
  | "warning"
  | "error"
  | "gradient";

Normal Sizes

type NormalSizes = "xs" | "sm" | "md" | "lg" | "xl";

Normal Weights

type NormalWeights = "light" | "normal" | "bold" | "extrabold" | "black";
gradient blue backgroundgradient violet background