3. Button variants

이 문서는 다양한 버튼 스타일 및 변형을 쉽게 구현하기 위한 방법을 안내하는 가이드입니다.

---

Button UI

Button은 variant가 많고, Tailwind CSS는 nested selector를 지양합니다. 그러므로 React 컴포넌트로 구현하는 방식을 권장합니다.

설치

다음 패키지 3가지를 추가합니다. 가이드 2-3을 참조하여 src/lib/utils.ts를 설정하세요.

설치 (pnpm)

pnpm add tailwind-merge clsx class-variance-authority

Button library 예시

아래는 예시로 구현한 Button 컴포넌트와 사용 예시입니다.

src/components/ui/button.tsx

src/components/ui/button.tsx

import { VariantProps, cva } from 'class-variance-authority';
import { ComponentProps } from 'react';
import { cn } from '@/lib/utils';

const buttonVariants = cva(
  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-slate-100',
  {
    variants: {
      bgcolor: {
        default: 'bg-slate-900 text-slate-50 hover:bg-slate-700',
        pink: 'bg-pink-900 text-pink-50 hover:bg-pink-500',
      },
      outline: {
        default: 'border border-transparent',
        black: 'border-4 border-black',
      },
      size: {
        default: 'h-10 py-2 px-4 text-sm',
        sm: 'h-9 px-2 rounded-md text-xs',
        lg: 'h-11 px-8 rounded-md text-base',
      },
    },
    defaultVariants: {
      bgcolor: 'default',
      outline: 'default',
      size: 'default',
    },
  }
);

interface ButtonProps extends ComponentProps<'button'>, VariantProps<typeof buttonVariants> {}

const Button = ({ className, bgcolor, outline, size, ...props }: ButtonProps) => {
  return (
    <button
      className={cn(
        buttonVariants({
          bgcolor,
          outline,
          size,
          className,
        })
      )}
      {...props}
    />
  );
};

export default Button;

Component에서 Button 사용 예시 (page.tsx)

사용 예시 — page.tsx

import Button from '@/components/ui/button';

const ButtonPage = () => {
  return (
    <>
      <Button>My Button 1</Button>
      <Button bgcolor="pink">My Button 2</Button>
      <Button bgcolor="pink" outline="black"> My Button 3 </Button>
      <Button bgcolor="pink" outline="black" size="lg"> My Button 4 </Button>
    </>
  );
};

export default ButtonPage;

추가 참고: 설치 후 utils 설정은 가이드 2-3을 참조하세요.

링크: Atlassian