Park UI

Usage

Park UI

variant

size: md

import { Badge, type BadgeProps } from '~/components/ui/badge'

export const Demo = (props: BadgeProps) => {
  return <Badge {...props}>Park UI</Badge>
}

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 BadgeProps extends BadgeVariantProps, HTMLArkProps<'div'> {}

export const Badge = forwardRef<HTMLDivElement, BadgeProps>((props, ref) => {
  const { size, variant, className, ...rest } = props
  return <ark.div className={styles({ size, variant, className })} ref={ref} {...rest} />
})

Badge.displayName = 'Badge'

type BadgeVariantProps = VariantProps<typeof styles>

const styles = tv(
  {
    base: 'badge',
    defaultVariants: { variant: 'subtle', size: 'md' },
    variants: {
      variant: {
        solid: 'badge--variant_solid',
        subtle: 'badge--variant_subtle',
        outline: 'badge--variant_outline',
      },
      size: { sm: 'badge--size_sm', md: 'badge--size_md', lg: 'badge--size_lg' },
    },
  },
  { twMerge: false },
)

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

export interface BadgeProps extends HTMLArkProps<'div'>, BadgeVariantProps {}

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

type BadgeVariantProps = VariantProps<typeof styles>

const styles = tv(
  {
    base: 'badge',
    defaultVariants: { variant: 'subtle', size: 'md' },
    variants: {
      variant: {
        solid: 'badge--variant_solid',
        subtle: 'badge--variant_subtle',
        outline: 'badge--variant_outline',
      },
      size: { sm: 'badge--size_sm', md: 'badge--size_md', lg: 'badge--size_lg' },
    },
  },
  { twMerge: false },
)

Not yet available