# Native Button

> iOS/macOS-feel button with hairline ring, soft shadow and a subtle press scale.

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

## Install

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

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

## Dependencies

No extra dependencies.

## Usage

```tsx title="components/native-button-demo.tsx"
import { NativeButton } from "@/components/native-button"

export default function NativeButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3 rounded-2xl bg-neutral-100 p-10 dark:bg-neutral-900">
      <NativeButton>Cancel</NativeButton>
      <NativeButton tone="primary">Continue</NativeButton>
      <NativeButton disabled>Disabled</NativeButton>
    </div>
  )
}
```

## Source

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

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

const tones = {
  default:
    "bg-white text-neutral-900 shadow-[0_0_0_0.5px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.12)] hover:bg-neutral-50 dark:bg-neutral-700 dark:text-white dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.12),0_1px_2px_rgba(0,0,0,0.4)] dark:hover:bg-neutral-600",
  primary:
    "bg-[#0064d2] text-white shadow-[0_0_0_0.5px_rgba(0,0,0,0.1),0_1px_2px_rgba(0,0,0,0.2),inset_0_1px_0_rgba(255,255,255,0.25)] hover:bg-[#0a74e8]",
} as const

export interface NativeButtonProps extends React.ComponentProps<"button"> {
  tone?: keyof typeof tones
}

export function NativeButton({ tone = "default", className, ...props }: NativeButtonProps) {
  return (
    <button
      className={cn(
        "inline-flex h-8 items-center justify-center gap-1.5 rounded-[7px] px-4 text-[13px] font-medium tracking-[-0.01em] select-none",
        "transition-[transform,background-color,filter] duration-150 ease-out active:scale-[0.98] active:brightness-95",
        "focus-visible:ring-[3px] focus-visible:ring-[#007aff]/40 focus-visible:outline-none",
        "disabled:pointer-events-none disabled:opacity-40",
        tones[tone],
        className
      )}
      {...props}
    />
  )
}
```