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 Space 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';
Vercel banner