---
name: IconButton
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import IconButton from './IconButton'
import cactusTheme from '@repay/cactus-theme'
import { ActionsAdd } from '@repay/cactus-icons'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# IconButton

The `IconButton` allows you to turn icons into buttons, and it was designed to allow the use of icons from any library.

### Try it out

export const code = `<IconButton label="add">
  <ActionsAdd />
</IconButton>`

<LiveProvider code={code} scope={{ IconButton, ActionsAdd }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Best practices

- To ensure that the `IconButton` is accessible, use a descriptive `label`. This will set the `aria-label` on the button.
- Icon sizes should not be defined manually; the size should be defined using the `iconSize` prop.

## Basic usage

```jsx
import { IconButton } from '@repay/cactus-web'
import { StatusCheck } from '@repay/cactus-icons'
...
// Basic usage
<IconButton>
  <StatusCheck />
</IconButton>

// Call to action variant
<IconButton variant="action">
  <StatusCheck />
</IconButton>

// Inverse
<IconButton inverse={true}>
  <StatusCheck />
</IconButton>

// Sizing
<IconButton iconSize="large">
  <StatusCheck />
</IconButton>

// Disabled
<IconButton disabled={true}>
  <StatusCheck />
</IconButton>
```

## Properties

<PropsTable of={IconButton} />