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 child element to the Button and disable the interactions using the 'disabled' property.

Bordered

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

Flat

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

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

Light

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

AttributeTypeDescriptionDefault
colorNormalColorsChange button colordefault
sizeNormalSizesChange button sizemedium
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 Accessibility Props

AttributeTypeDescriptionDefault
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