Commonly used operating buttons, button combinations, button layouts.

  • <Button> is the most basic element in the component, you can quickly create a styled button.
  • <IconButton> Button with icon.
  • <ButtonGroup> Button group control can put a group of buttons together and control the layout.
  • <ButtonToolbar> Button Toolbar Controls.


import { Button, IconButton, ButtonGroup, ButtonToolbar } from 'rsuite';

// or
import Button from 'rsuite/Button';
import IconButton from 'rsuite/IconButton';
import ButtonGroup from 'rsuite/ButtonGroup';
import ButtonToolbar from 'rsuite/ButtonToolbar';




appearance property can set appearance of button:

  • 'default'(default) default button.
  • 'primary' Emphasi, guide button.
  • 'link' Button like link.
  • 'subtle' Weakened button.
  • 'ghost' Ghost button, background transparent, place button on background element.


The size property sets the button size, options includes: 'lg', 'md', 'sm', 'xs'.

Colorful button

The color property sets the button style, Options include: 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'.

Custom combination button

Icon button

<IconButton> is a component designed for icon buttons that sets the icon required for the Icon property definition. Only the icon button can be set to a round button.


This is generally applicable to flow layouts, or to full rows at the top and bottom of a container.




Button group

Vertical group

Split button

Button toolbar


The buttons are laid out horizontally in the button set and are equally wide.

Accessing DOM

The underlying <button> element is accessible via ref attribute of Button.

function App() {
  const buttonRef = useRef<HTMLButtonElement>(null);

  return <Button ref={buttonRef}>Text</Button>;



Property Type (Default) Description
active boolean A button can show it is currently the active user selection
appearance Appearance ('default') A button can have different appearances
as ElementType ('button') You can use a custom element for this component
block boolean Spans the full width of the Button parent
children * ReactNode Primary content
classPrefix string ('btn') The prefix of the component CSS class
color Color A button can have different colors
disabled boolean A button can show it is currently unable to be interacted with
endIcon ReactNode Display an icon after buttont text
href string Providing a href will render an a element
loading boolean A button can show a loading indicator
size 'lg' | 'md' | 'sm' | 'xs' ('md') A button can have different sizes
startIcon ReactNode Display an icon before buttont text


Iconbutton extends all props of Button

Property Type (Default) Description
circle boolean Set circle button
classPrefix string ('btn-icon') The prefix of the component CSS class
icon Element<typeof Icon> Set the icon of button
placement enum: 'left'|'right' ('left') The placement of icon


Property Type (Default) Description
block boolean Display block buttongroups
classPrefix string ('btn-group') The prefix of the component CSS class
justified boolean Horizontal constant width layout
size 'lg' | 'md' | 'sm' | 'xs' ('md') Set button size
vertical boolean Vertical layouts of button


type Appearance = 'default' | 'primary' | 'link' | 'subtle' | 'ghost';


type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';
Vercel banner