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


The default Button.Group


You can disabled all buttons with the property disabled.


You can use the loading status in any button you want


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


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


You can use any Button variant in a Button.Group


Button Group Props

AttributeTypeAccepted valuesDescriptionDefault
colorNormalColorsNormalColorsChange buttons colordefault
sizeNormalSizesNormalSizesChange buttons sizemedium
disabledbooleantrue/falseDisable all buttonsfalse
borderedbooleantrue/falseBordered 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
cssStitches.CSS-Override Default CSS style-
askeyof JSX.IntrinsicElements-Changes which tag component outputsdiv
...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';
gradient blue backgroundgradient violet background