> 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/developer-guide-en/pjt-prepare/publish-your-docs/store-front-framework-next.js/03.-publishing-guide/3.-button-variants.md).

# 3. Button variants

This document is a guide to easily implementing various button styles and variants.

***

### Button UI

Buttons have many variants, and Tailwind CSS discourages nested selectors.\
Therefore, implementing them as a React component is recommended.

### Installation

Add the following 3 packages. Refer to guide 2-3 to set up `src/lib/utils.ts`.

{% code title="Installation (pnpm)" %}

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

{% endcode %}

### Button Library Example

Below is an example Button component implementation and usage example.

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

Example of using Button in a component (page.tsx)

{% code title="Usage Example — 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 %}

Additional note: for utils setup after installation, refer to guide 2-3.

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