Park UI

Usage

variant

size: md

import { ArrowRightIcon } from 'lucide-react'
import { Button, type ButtonProps } from '~/components/ui/button'

export const Demo = (props: ButtonProps) => {
  return (
    <Button {...props}>
      Button
      <ArrowRightIcon />
    </Button>
  )
}

Examples

With a different color

Use the color-palette_{color} className to change the color of the button.

<div className="d_flex gap_4 items_center">
  <Button className="color-palette_red" variant="solid">
    Button
  </Button>
  <Button className="color-palette_red" variant="outline">
    Button
  </Button>
  <Button className="color-palette_red" variant="ghost">
    Button
  </Button>
</div>

Installation

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

import { ark, type HTMLArkProps } from '@ark-ui/react/factory'
import { forwardRef } from 'react'
import { tv, type VariantProps } from 'tailwind-variants'

export interface ButtonProps extends ButtonVariantProps, HTMLArkProps<'button'> {}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
  const { size, variant, className, ...buttonProps } = props
  return <ark.button className={styles({ size, variant, className })} ref={ref} {...buttonProps} />
})

Button.displayName = 'Button'

type ButtonVariantProps = VariantProps<typeof styles>

const styles = tv(
  {
    base: 'button',
    defaultVariants: { variant: 'solid', size: 'md' },
    variants: {
      variant: {
        solid: 'button--variant_solid',
        outline: 'button--variant_outline',
        ghost: 'button--variant_ghost',
        link: 'button--variant_link',
        subtle: 'button--variant_subtle',
      },
      size: {
        xs: 'button--size_xs',
        sm: 'button--size_sm',
        md: 'button--size_md',
        lg: 'button--size_lg',
        xl: 'button--size_xl',
        '2xl': 'button--size_2xl',
      },
    },
  },
  { twMerge: false },
)

import { type HTMLArkProps, ark } from '@ark-ui/solid'
import { splitProps } from 'solid-js'
import { type VariantProps, tv } from 'tailwind-variants'

export interface ButtonProps extends ButtonVariantProps, HTMLArkProps<'button'> {}

export const Button = (props: ButtonProps) => {
  const [variantProps, buttonProps] = splitProps(props, ['class', 'size', 'variant'])
  return <ark.button class={styles(variantProps)} {...buttonProps} />
}

type ButtonVariantProps = VariantProps<typeof styles>

const styles = tv(
  {
    base: 'button',
    defaultVariants: { variant: 'solid', size: 'md' },
    variants: {
      variant: {
        solid: 'button--variant_solid',
        outline: 'button--variant_outline',
        ghost: 'button--variant_ghost',
        link: 'button--variant_link',
        subtle: 'button--variant_subtle',
      },
      size: {
        xs: 'button--size_xs',
        sm: 'button--size_sm',
        md: 'button--size_md',
        lg: 'button--size_lg',
        xl: 'button--size_xl',
        '2xl': 'button--size_2xl',
      },
    },
  },
  { twMerge: false },
)

Not yet available