Components
Icon button

Icon Button

An interactive element used to trigger actions.

Usage

import { ArrowRightIcon } from 'lucide-react'
import { IconButton, type IconButtonProps } from '~/components/ui/icon-button'

export const Demo = (props: IconButtonProps) => {
  return (
    <IconButton {...props} aria-label="Next Page">
      <ArrowRightIcon />
    </IconButton>
  )
}

Installation

1

Add Component

Insert code snippet into your project. Update import paths as needed.

import { ark } from '@ark-ui/react/factory'
import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { iconButton } from 'styled-system/recipes'

export const IconButton = styled(ark.button, iconButton)
export interface IconButtonProps extends ComponentProps<typeof IconButton> {}
2

Add Recipe

This step is necessary only if you do not use any of the Park UI plugins.

import { defineRecipe } from '@pandacss/dev'
import deepmerge from 'deepmerge'
import { button } from './button'

export const iconButton = deepmerge(
  button,
  defineRecipe({
    className: 'iconButton',
    variants: {
      size: {
        xs: {
          px: '0',
        },
        sm: {
          px: '0',
        },
        md: {
          px: '0',
        },
        lg: {
          px: '0',
        },
        xl: {
          px: '0',
        },
        '2xl': {
          px: '0',
        },
      },
    },
  }),
)

Previous

Hover Card

Next

Icon

On this page