IconButton
Icon button renders an icon within in a button.
Import
import { IconButton } from 'rsuite';Examples
Basic
With text
Appearance
Circle
Sizes
Colors
Disabled
Active
Loading
Button group
Accessibility
ARIA Properties
- IconButton has role of
button.
Keyboard interaction
- When IconButton has focus, Space or Enter activates it.
Props
<IconButton>
| 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 |
| children | ReactNode | Primary content |
| circle | boolean | Set circle button |
| classPrefix | string ('btn-icon') |
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 |
| href | string | Providing a href will render an a element |
| icon | Element<typeof Icon> | Set the icon of button |
| loading | boolean | A button can show a loading indicator |
| placement | 'left' | 'right' ('left') |
The placement of icon |
| size | 'lg' | 'md' | 'sm' | 'xs' ('md') |
A button can have different sizes |
ts:Appearance
type Appearance = 'default' | 'primary' | 'link' | 'subtle' | 'ghost';
ts:Color
type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';