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 status with the loading property. You can change the loader with the loaderType property


You can change the full style towards a bodered 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 towards a ghost button with the ghost property.


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

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


You can change the full style towards 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

AttributeTypeAccepted valuesDescriptionDefault
colorNormalColorsNormalColorsChange button colordefault
sizeNormalSizesNormalSizesChange button sizemedium
disabledbooleantrue/falseDisable buttonfalse
clickablebooleantrue/falseInidicates if button is clickablefalse
borderedbooleantrue/falseBodered buttonfalse
flatbooleantrue/falseFlat buttonfalse
roundedbooleantrue/falseRounded buttonfalse
ghostbooleantrue/falseThe opposite colorfalse
shadowbooleantrue/falseDisplay shadow effectfalse
ripplebooleantrue/falseDisplay drip animationfalse
autobooleantrue/falseAutoscale button widthfalse
animatedbooleantrue/falseDisplay drip and scale animationtrue
borderWeightNormalWeightsNormalWeightsBorder weight for bordered buttonnormal
onClickMouseEventHandler-Button click handler-
iconReactNode-Show icon in button-
iconRightReactNode-Show icon on the other side of the button-
typeButtonHTMLAttributes.typebutton reset submitNative type of button elementbutton
refRef<HTMLButtonElement | null>-forwardRef-
...ButtonHTMLAttributes'id', 'className', ...Button native props-

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';