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.

Usage

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

Examples

Default

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

IconButton

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

setting block property。

Disabled state

Active state

Loading State

ButtonGroup

Vertical ButtonGroup

Button Toolbar

Justified

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

Props

<Button>

Property Type (Default) Description
active boolean A button can show it is currently the active user selection
appearance enum: 'default', 'primary', 'link', 'subtle', 'ghost'
('default')
A button can have different appearances
block boolean Spans the full width of the Button parent
children * React.Node Primary content
classPrefix string ('btn') The prefix of the component CSS class
color enum: 'red', 'orange','yellow', 'green',
'cyan', 'blue', 'violet'
A button can have different colors
componentClass React.ElementType ('button') You can use a custom element for this component
disabled boolean A button can show it is currently unable to be interacted with
href string Providing a href will render an a element
loading boolean A button can show a loading indicator
size enum: 'lg', 'md', 'sm', 'xs' ('md') A button can have different sizes

<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 React.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 enum: lg, md, sm, xs Set button size
vertical boolean Vertical layouts of button