Button
Commonly used operating buttons, button combinations, button layouts.
Import
import { Button, ButtonGroup, ButtonToolbar } from 'rsuite';<Button>is the most basic element in the component, you can quickly create a styled button.<ButtonGroup>Button group control can put a group of buttons together and control the layout.<ButtonToolbar>Button Toolbar Controls.
Examples
Basic
Appearance
appearance property sets the button style, options includes: default, primary, link, subtle, ghost.
Sizes
The size property sets the button size, options includes: lg, md, sm, xs.
Colors
The color property sets the button style, Options include: red, orange, yellow, green, cyan, blue, violet.
Custom combination 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.
Accessibility
ARIA Properties
- Button has role of
button.
Keyboard interaction
- When Button has focus, Space or Space activates it.
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 |
<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';