eeff292
import { IconLoader2 as LoaderCircle } from '@tabler/icons-react'
import type { ReactNode } from 'react'
export function Button({
children,
busy = false,
disabled = false,
onClick,
type = 'submit',
secondary = false,
}: {
children: ReactNode
busy?: boolean
disabled?: boolean
onClick?: () => void
type?: 'submit' | 'button'
secondary?: boolean
}) {
return (
<button
type={type}
onClick={onClick}
disabled={disabled || busy}
aria-busy={busy}
className={`flex min-h-12 w-full items-center justify-center gap-2 rounded-lg px-4 text-base font-semibold tracking-[0.5px] transition-colors disabled:cursor-not-allowed ${secondary ? 'border border-control-border bg-field text-ink hover:bg-elevated' : 'bg-primary text-white hover:bg-primary-hover active:bg-primary-pressed disabled:bg-disabled disabled:text-disabled-ink'}`}
>
{busy && <LoaderCircle size={18} className="animate-spin motion-reduce:animate-none" />}
{children}
</button>
)
}