Icon Button

An interactive element used to trigger actions.

variant

size: md

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>
  )
}

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

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

Usage

import { IconButton } from '~/components/ui/icon-button'

Installation

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

1

Add Styled Primitive

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

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

export type IconButtonProps = ComponentProps<typeof IconButton>
export const IconButton = styled(ark.button, button, {
  defaultProps: { px: '0' } as ButtonVariantProps,
})

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

export type IconButtonProps = ComponentProps<typeof IconButton>
export const IconButton = styled(ark.button, button, {
  defaultProps: { px: '0' } as ButtonVariantProps,
})

No snippet found

2

Add Re-Export

To improve the developer experience, re-export the styled primitives in~/components/ui/icon-button.tsx.

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

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

3

Integrate Recipe

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

Not yet available