server/assets/js/react/components/Button.tsx

31 lines
814 B
TypeScript

import * as React from "react"
import clsx from "clsx"
import { Button as BaseButton, ButtonProps } from "@mui/base/Button"
export const Button = React.forwardRef<
HTMLButtonElement,
ButtonProps & { invert?: boolean; href?: string }
>(function Button(props, ref) {
const { invert, className, href, ...other } = props
const button = (
<BaseButton
ref={ref}
className={clsx(
"cursor-pointer rounded-lg px-4 py-1.5 text-sm font-semibold transition disabled:cursor-not-allowed disabled:opacity-50",
invert
? "bg-white text-neutral-950 hover:bg-neutral-200"
: "bg-neutral-950 text-white hover:bg-neutral-800",
className
)}
{...other}
/>
)
if (href === undefined) {
return button
}
return <a href={href}>{button}</a>
})