Icon Button

An interactive element used to trigger actions.

Usage

variant

size: md

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

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

Installation

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

1

Styled Primitive

Copy the code snippet below into ~/components/ui/primitives/icon-button.tsx

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

export type IconButtonProps = ComponentProps<typeof IconButton>
export const IconButton = styled(ark.button, iconButton)

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

export type IconButtonProps = ComponentProps<typeof IconButton>
export const IconButton = styled(ark.button, iconButton)

No snippet found

Extend ~/components/ui/primitives/index.ts with the following line:

export { IconButton, type IconButtonProps } from './icon-button'

2

Integrate Recipe

If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts: