Documentation

Guide

Getting Started

NextUI + Next.jsUpdated

Theme

Layout

Components

Button Group

If you need to make a group of buttons you can use the compound component Button.Group and inside the buttons you want to group.

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

Default

The default Button.Group

Disabled

You can disabled all buttons with the property disabled.

Loading

You can use the loading status in any button you want

Sizes

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

Vertical

You can use the vertical property to sort the buttons vertically.

Variants

You can use any Button variant in a Button.Group

APIs

Button Group Props

Attribute	Type	Accepted values	Description	Default
color	`NormalColors`	NormalColors	Change buttons color	`default`
size	`NormalSizes`	NormalSizes	Change buttons size	`medium`
disabled	`boolean`	`true/false`	Disable all buttons	`false`
bordered	`boolean`	`true/false`	Bordered buttons	`false`
flat	`boolean`	`true/false`	Flat buttons	`false`
rounded	`boolean`	`true/false`	Rounded buttons	`false`
ghost	`boolean`	`true/false`	The opposite color	`false`
auto	`boolean`	`true/false`	Autoscale buttons width	`false`
ripple	`boolean`	`true/false`	Display drip animation for all buttons	`true`
animated	`boolean`	`true/false`	Display drip and scale animation	`true`
borderWeight	`NormalWeights`	NormalWeights	Border weight for `bordered` buttons	`normal`
css	`Stitches.CSS`	-	Override Default CSS style	-
as	`keyof JSX.IntrinsicElements`	-	Changes which tag component outputs	`div`
...	`ButtonHTMLAttributes`	`'id', 'className', ...`	Native button props	-

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

Button Card