import * as React from "react" ; import clsx from "clsx" ; import { Spinner } from "../spinner" ; import { buttonBlockStyles , ButtonProps , buttonRoundedStyles , buttonSizes , disabledStyles , primaryButtonColors , renderButtonIcon , } from "./utils" ; link export const PrimaryButton = React . forwardRef < HTMLButtonElement , ButtonProps > ( ( { className , style , type , block , size = "md" , color = "silacak" , rounded , icon , iconPosition = "left" , isLoading , loadingText = "Memuat..." , disabled , children , ... rest } , ref ) => ( < button className = { clsx ( buttonBlockStyles ( block , iconPosition ) , buttonSizes ( size ) , buttonRoundedStyles ( rounded , size ) , "items-center justify-center border border-transparent font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2" , primaryButtonColors ( color ) , disabledStyles , className ) } disabled = { isLoading ?? disabled } ref = { ref } style = { style } type = { type ?? "button" } { ... rest } > { renderButtonIcon ( { icon : isLoading ? Spinner : icon , size , additionalClasses : isLoading ? "animate-spin" : undefined , iconPosition , } ) } { isLoading ? loadingText : children } < /button>)); PrimaryButton . displayName = "PrimaryButton" ;