# Origin Button

> Origin UI–style button with a refined 1px border, inner shadow and restrained interaction.

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

## Install

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

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

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/origin-button-demo.tsx"
import { ArrowRight, Plus } from "lucide-react"

import { OriginButton } from "@/components/origin-button"

export default function OriginButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3 p-8">
      <OriginButton>
        <Plus /> Outline
      </OriginButton>
      <OriginButton variant="solid">
        Solid <ArrowRight />
      </OriginButton>
      <OriginButton disabled>Disabled</OriginButton>
    </div>
  )
}
```

## Source

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

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

const variants = {
  outline:
    "border border-input bg-background text-foreground shadow-xs shadow-black/5 hover:bg-accent hover:text-accent-foreground",
  solid:
    "bg-primary text-primary-foreground shadow-sm shadow-black/5 hover:bg-primary/90 border border-transparent inset-shadow-2xs inset-shadow-white/20",
} as const

export interface OriginButtonProps extends React.ComponentProps<"button"> {
  variant?: keyof typeof variants
}

export function OriginButton({ variant = "outline", className, ...props }: OriginButtonProps) {
  return (
    <button
      className={cn(
        "inline-flex h-9 items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium whitespace-nowrap",
        "transition-[color,box-shadow,background-color] outline-offset-2 outline-ring/70 focus-visible:outline-2",
        "active:scale-[0.99] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
        variants[variant],
        className
      )}
      {...props}
    />
  )
}
```