import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/registry/berlin/lib/utils"; type IconComponent = React.ElementType<{ className?: string }>; export const buttonVariants = cva( "inline-flex cursor-pointer items-center justify-center whitespace-nowrap rounded-full border text-center font-medium no-underline transition-[background-color,border-color,color,box-shadow] duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:select-none [&_svg]:pointer-events-none [&_svg]:shrink-0", { variants: { variant: { primary: "", secondary: "", }, size: { small: "gap-1 px-[15px] py-[7px] text-[14px] leading-[20px] [&_svg]:size-4", large: "gap-2 px-[23px] py-[11px] text-[16px] leading-[24px] [&_svg]:size-5", }, theme: { dark: "", light: "", }, }, compoundVariants: [ { variant: "primary", theme: "dark", className: "border-primary bg-primary text-white focus-visible:shadow-(--shadow-focus) disabled:border-transparent disabled:bg-secondary disabled:text-muted-foreground", }, { variant: "primary", theme: "light", className: "border-inverse-background bg-inverse-background text-inverse-foreground focus-visible:shadow-(--shadow-focus) disabled:border-transparent disabled:bg-inverse-muted disabled:text-inverse-muted-foreground", }, { variant: "secondary", theme: "dark", className: "focus-visible:border-foreground focus-visible:bg-foreground focus-visible:text-background disabled:border-transparent disabled:bg-secondary disabled:text-muted-foreground", }, { variant: "secondary", theme: "light", className: "border-inverse-border text-inverse-background focus-visible:border-inverse-background focus-visible:bg-inverse-background focus-visible:text-inverse-foreground disabled:border-transparent disabled:bg-inverse-muted disabled:text-inverse-muted-foreground", }, ], defaultVariants: { variant: "primary", size: "large", theme: "dark", }, }, ); export type ButtonProps = Omit< React.ComponentPropsWithoutRef<"button">, "type" > & VariantProps & { asChild?: boolean; block?: boolean; type?: "button" | "submit" | "reset"; url?: string; leftIcon?: IconComponent; rightIcon?: IconComponent; loading?: boolean; }; function SpinnerIcon({ className }: { className?: string }) { return ( ); } export const Button = React.forwardRef( ( { className, variant, size, theme, asChild = false, block = false, url, leftIcon: LeftIcon, rightIcon: RightIcon, loading = false, disabled, children, type = "button", onClickCapture, onKeyDownCapture, role, tabIndex, ...props }, ref, ) => { const iconClassName = size === "small" ? "size-4" : "size-5"; const Left = loading ? SpinnerIcon : LeftIcon; const isDisabled = disabled || loading; const content = ( <> {Left ? : null} {children} {RightIcon ? : null} ); const handleAnchorClickCapture: React.MouseEventHandler = (event) => { (onClickCapture as React.MouseEventHandler | undefined)?.( event, ); }; const handleAnchorKeyDownCapture: React.KeyboardEventHandler< HTMLAnchorElement > = (event) => { (onKeyDownCapture as React.KeyboardEventHandler | undefined)?.( event, ); }; if (url && !asChild && !isDisabled) { return ( )} > {content} ); } const Comp = asChild ? Slot : "button"; const handleDisabledClickCapture: React.MouseEventHandler = ( event, ) => { if (isDisabled && asChild) { event.preventDefault(); event.stopPropagation(); return; } (onClickCapture as React.MouseEventHandler | undefined)?.(event); }; const handleDisabledKeyCapture: React.KeyboardEventHandler = ( event, ) => { if (isDisabled && asChild && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); event.stopPropagation(); return; } (onKeyDownCapture as React.KeyboardEventHandler | undefined)?.( event, ); }; return ( {content} ); }, ); Button.displayName = "Button";

Installation

About

Usage

Dependencies

Source