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

AttributeTypeAccepted valuesDescriptionDefault
colorNormalColorsNormalColorsChange buttons colordefault
sizeNormalSizesNormalSizesChange buttons sizemedium
disabledbooleantrue/falseDisable all buttonsfalse
borderedbooleantrue/falseBodered buttonsfalse
flatbooleantrue/falseFlat buttonsfalse
roundedbooleantrue/falseRounded buttonsfalse
ghostbooleantrue/falseThe opposite colorfalse
autobooleantrue/falseAutoscale buttons widthfalse
ripplebooleantrue/falseDisplay drip animation for all buttonstrue
animatedbooleantrue/falseDisplay drip and scale animationtrue
borderWeightNormalWeightsNormalWeightsBorder weight for bordered buttonsnormal
...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';