> For the complete documentation index, see [llms.txt](https://tech.x2bee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tech.x2bee.com/dev-guide/pjt-prepare/publish-your-docs/store-front-framewok-next.js/03./3.-button-variants.md).

# 3. Button variants

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

***

### Button UI

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

### 설치

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

{% code title="설치 (pnpm)" %}

```bash
pnpm add tailwind-merge clsx class-variance-authority
```

{% endcode %}

### Button library 예시

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

src/components/ui/button.tsx

{% code title="src/components/ui/button.tsx" %}

```typescript
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;
```

{% endcode %}

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

{% code title="사용 예시 — page.tsx" %}

```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;
```

{% endcode %}

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

링크: [Atlassian](http://www.atlassian.com/)