<IconButtonDocs />

IconButton is an accessible action element represented by an icon.

Usage

Use the variant prop to switch between button styles.

variant

filled

Outlined

base

hover

active

disabled

<IconButton icon={<Icon id='settings' />} />

Props

Name
Description
color

Display variant color

"primary"
disabled

Disables the element, preventing mouse and keyboard events

boolean
fullWidth

Toggles full width element layout

boolean
href

HTML element href

string
icon

Button content

ReactElement
size

Sets the display size

"small" | "large"
variant

Display variant

"filled" | "outlined"
wrapWhenDisabled

Indicates whether buttons in a disabled state should be wrapped with a span

boolean

TypeScript customization

You can use module augmentation to customize the TypeScript types for any of IconButton's props:

declare module 'componentry/types/components/IconButton/IconButton' {
  interface IconButtonPropsOverrides {
    // ... overwrite any types for IconButton props ...
  }
}

See the TypeScript guide for more information.

StylingIconButton styles

Class
Description
.C9Y-IconButton-DisabledWrapper
Class applied to disabled button wrapper element
.C9Y-IconButton-base
Base class applied to all variants for shared structural styles
.C9Y-IconButton-filled
Variant class applied when `variant="transparent"`
.C9Y-IconButton-largeSize
Sizing class applied when `size="large"`
.C9Y-IconButton-outlined
Variant class applied when `variant="outlined"`
.C9Y-IconButton-smallSize
Sizing class applied when `size="small"`