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

Attribute	Type	Description	Default
color	NormalColors	Change button color	`default`
size	NormalSizes	Change button size	`md`
disabled	`boolean`	Disable button	`false`
bordered	`boolean`	Bordered button	`false`
flat	`boolean`	Flat button	`false`
rounded	`boolean`	Rounded button	`false`
ghost	`boolean`	The opposite color	`false`
shadow	`boolean`	Display shadow effect	`false`
ripple	`boolean`	Display drip animation	`true`
auto	`boolean`	Autoscale button width	`false`
animated	`boolean`	Display drip and scale animation	`true`
borderWeight	NormalWeights	Border weight for `bordered` button	`normal`
autoFocus	`boolean`	Automatically focus button	`false`
onClick	`MouseEventHandler`	Button click handler	-
icon	`ReactNode`	Show icon in button	-
iconRight	`ReactNode`	Show icon on the other side of the button	-
type	`button` `reset` `submit`	Native type of button element	`button`
ref	`Ref<HTMLButtonElement \| null>`	forwardRef	-
css	`Stitches.CSS`	Override Default CSS style	-
iconLeftCss	`Stitches.CSS`	Override icon CSS style	-
iconRightCss	`Stitches.CSS`	Override iconRight CSS style	-
as	`keyof JSX.IntrinsicElements`	Changes which tag component outputs	`button`
...	`'id', 'className', ...`	Button native props	-

Button Events

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

Button Accessibility Props

Attribute	Type	Description	Default
id	`string`	The element's unique identifier. See MDN	-
excludeFromTabOrder	`boolean`	Whether 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-expanded	`boolean`	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.	-
aria-haspopup	`boolean` `menu` `listbox` `tree` `grid` `dialog`	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.	-
aria-controls	`string`	Identifies the element (or elements) whose contents or presence are controlled by the current element.	-
aria-pressed	`boolean`	Indicates the current "pressed" state of toggle buttons.	-
aria-label	`string`	Defines a string value that labels the current element	-
aria-labelledby	`string`	Identifies the element (or elements) that labels the current element	-
aria-describedby	`string`	Identifies the element (or elements) that describes the object.	-
aria-details	`string`	Identifies 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";

Avatar Button Group

Created by Junior Garcia

Deployed on

Documentation

Button