Button
Commonly used operating buttons。
Import
import { Button } from 'rsuite';<Button>is the most basic element in the component, you can quickly create a styled button.
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.
Icon before
Display an icon before the text.
Icon after
Display an icon after the text.
Block
This is generally applicable to flow layouts, or to full rows at the top and bottom of a container.
Disabled
Active
Loading
Accessibility
ARIA Properties
- Button has role of
button.
Keyboard interaction
- When Button has focus, Space or Enter 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 |
Appearance
type Appearance = 'default' | 'primary' | 'link' | 'subtle' | 'ghost';
Color
type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';