IconButton

Icon button renders an icon within in a button.

Import

MainIndividual
import { IconButton } from 'rsuite';

Examples

Basic

With text

Appearance

Circle

Sizes

Colors

Disabled

Active

Toggleable

Loading

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 Version
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
onToggle (active: boolean, event: MouseEvent) => void Callback when the button is toggled between active and inactive states Version 6.0.0 or above
placement 'left' | 'right' | 'start' | 'end' ('start') The placement of icon
size 'lg' | 'md' | 'sm' | 'xs' ('md') A button can have different sizes
toggleable boolean A button can switch between active and inactive states Version 6.0.0 or above

Type Definitions

Appearance 

type Appearance = 'default' | 'primary' | 'link' | 'subtle' | 'ghost';

Color 

type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';