Button

Commonly used operating buttons, button combinations, button layouts.

Import

MainIndividual
import { Button, IconButton, ButtonGroup, ButtonToolbar } from 'rsuite';
  • <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.

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