# Badge Button Combo

> Pill button with an embedded badge (New / Beta / count) on either side.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/badge-button-combo
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/badge-button-combo.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/badge-button-combo-demo.tsx"
import { ArrowRight } from "lucide-react"

import { BadgeButton } from "@/components/badge-button-combo"

export default function BadgeButtonComboDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 p-8">
      <BadgeButton>
        Announcing v2 <ArrowRight className="size-4" />
      </BadgeButton>
      <BadgeButton badge="12" badgePosition="right">
        Notifications
      </BadgeButton>
      <BadgeButton badge="Beta">Try the editor</BadgeButton>
    </div>
  )
}
```

## Source

```tsx title="components/badge-button-combo.tsx"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface BadgeButtonProps extends React.ComponentProps<"button"> {
  badge?: React.ReactNode
  badgePosition?: "left" | "right"
}

export function BadgeButton({ badge = "New", badgePosition = "left", className, children, ...props }: BadgeButtonProps) {
  const badgeNode = (
    <span className="inline-flex h-5 items-center rounded-full bg-primary px-2 text-[11px] leading-none font-semibold text-primary-foreground">
      {badge}
    </span>
  )

  return (
    <button
      className={cn(
        "inline-flex h-10 items-center gap-2.5 rounded-full border border-border bg-background py-1 text-sm font-medium text-foreground shadow-xs",
        badgePosition === "left" ? "pr-4 pl-1.5" : "pr-1.5 pl-4",
        "transition-[background-color,transform] hover:bg-accent active:scale-[0.98]",
        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-50",
        className
      )}
      {...props}
    >
      {badgePosition === "left" && badgeNode}
      {children}
      {badgePosition === "right" && badgeNode}
    </button>
  )
}
```