Icon Button

Icon buttons help people take minor actions with one tap

overviewguidelinesdeva11y
import { IconButton } from '@cerberus/react'

Usage

The IconButton API is similar to the Button, but with the addition of an ariaLabel prop.

Preview Playground

import { IconButton, type IconButtonProps } from '@cerberus/react' type MyIconButtonProps = IconButtonProps export function MyButton(props: MyIconButtonProps) { return ( <IconButton ariaLabel="Like something" disabled={false} palette="action" size="sm" usage="filled" > <ThumbsUp /> </IconButton> ) }

Customization

You can customize the button by utilizing the cx function.

API

export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  ariaLabel: string
  palette?: 'action' | 'secondaryAction' | 'danger'
  size?: 'sm' | 'lg'
  usage?: 'filled' | 'ghost' | 'outlined'
  asChild?: boolean
}


define function IconButton(props: IconButtonProps): ReactNode

Props

The IconButton component accepts the following props:

NameDefaultDescription
ariaLabel"Icon Button"The accessible label for the button.
paletteactionThe color palette of the button.
usageghostThe style treatment of the button.
sizelgThe size of the button.
asChildRender the Button as the child component.