Icon Button | Park UI

Installation

npx @park-ui/cli@next add icon-button

Add Component

Copy the code snippet below into you components folder.

import { forwardRef } from 'react'
import { Button, type ButtonProps } from './button'

export interface IconButtonProps extends ButtonProps {}

export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
  function IconButton(props, ref) {
    return <Button px="0" py="0" ref={ref} {...props} />
  },
)

Integrate Recipe

Integrate this recipe in to your Panda config.

Usage

import { IconButton } from '@/components/ui'

<IconButton aria-label="Search">
  <SearchIcon />
</IconButton>

Examples

Sizes

Use the size prop to change the size of the button.

Variants

Use the variant prop to change the appearance of the button.

Colors

Use the colorPalette prop to change the appearance of the button.

Rounded

Set the borderRadius prop to full to get a rounded button.

Props

Prop	Default	Type
`variant`	`'solid'`	`'solid' \| 'surface' \| 'subtle' \| 'outline' \| 'plain'`
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`