IconButton

The IconButton component is a button that displays an icon.

import { IconButton } from '@cerberus/react'

Usage

import { IconButton } from '@cerberus/react'
import { Tuning } from '@carbon/icons-react'

function BasicButtonPreview() {
  return <IconButton><Tuning /></IconButton>
}

Sizes

The IconButton component comes in two sizes: sm, lg. You can set the size by using the size prop.

import { IconButton } from '@cerberus/react'
import { Tuning } from '@carbon/icons-react'
import { HStack } from 'styled-system/jsx'

function SizesDemo() {
  return (
    <HStack>
      <IconButton size="sm" usage="filled">
        <Tuning />
      </IconButton>
      <IconButton size="lg" usage="filled">
        <Tuning />
      </IconButton>
    </HStack>
  )
}

Primitives

You can utilize the primitive components or the css prop to customize the button.

Component	Description
IconButton	The context provider for the Button parts

import { IconButton } from '@cerberus/react'
import { Tuning } from '@carbon/icons-react'

function CustomButtonPreview() {
  return (
    <IconButton
      ariaLabel="custom button"
      css={{
        bgColor: 'danger.bg.initial',
        color: 'danger.text.initial',
        rounded: 'md',
        transform: 'skew(-10deg)',
        _hover: {
          bgColor: 'black',
          color: 'yellow',
        },
      }}
    >
      <Tuning />
    </IconButton>
  )
}

API

Props

The IconButton component is an abstraction of the primitives and accepts the following props:

Name	Default	Description
clipboard	false	If true, uses Clipboard aria-attributes.
palette	`action`	The color palette (any of the Cerberus palettes) of the button.
usage	`filled`	The style treatment of the button.
shape	`sharp`	The shape of the button.

On this page