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}
    />
  )
}

Props

NativeButtonProps

Install

More like this

iOS Capsule Button

iOS Glass Button

iOS Get Button