27 lines
1.4 KiB
TypeScript
27 lines
1.4 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import * as React from "react"
|
||
|
|
import { Button as BaseButton } from "@base-ui/react/button"
|
||
|
|
import { cn } from "@/lib/utils"
|
||
|
|
|
||
|
|
export type ButtonProps = React.ComponentPropsWithoutRef<typeof BaseButton> & {
|
||
|
|
className?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const BaseButtonElement = BaseButton as React.ElementType
|
||
|
|
|
||
|
|
export const Button = React.forwardRef<HTMLElement, ButtonProps>(
|
||
|
|
({ className, ...props }, ref) => (
|
||
|
|
<BaseButtonElement
|
||
|
|
ref={ref}
|
||
|
|
className={cn(
|
||
|
|
"flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none [&:not([data-disabled]):hover]:bg-neutral-100 [&:not([data-disabled]):active]:bg-neutral-200 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:cursor-default data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:cursor-default disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:[&:not([data-disabled]):hover]:bg-neutral-800 dark:[&:not([data-disabled]):active]:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400",
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
)
|
||
|
|
|
||
|
|
Button.displayName = "Button"
|