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 |