Button

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

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

Default

The default Button contains an animation effect.

Disabled

Unusable and un-clickable Button.

Sizes

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

Colors

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

Shadow

You can add a shadow effect with the property shadow.

Loading

You can add a loading status with the loading property. You can change the loader with the loaderType property

Bordered

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

Rounded

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

Ghost

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

Flat

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

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

Light

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

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

Icons

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

APIs

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