Button

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 

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

Examples

Basic

Appearance

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.

Size

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.

Block

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

Disabled

Active

Loading

Button group

Vertical group

Split button

Button toolbar

Justified

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

Props

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

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

<ButtonGroup>

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

ts:Appearance 

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

ts:Color 

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