File size: 2,365 Bytes
9b906ea | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | import { forwardRef } from "react";
import { cn } from "#/utils/utils";
import { formControlButtonClassName } from "#/utils/form-control-classes";
interface BrandButtonProps {
testId?: string;
name?: string;
variant: "primary" | "secondary" | "tertiary" | "danger" | "ghost-danger";
type: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
isDisabled?: boolean;
className?: string;
onClick?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
startContent?: React.ReactNode;
/** Accessible label for icon-only buttons */
ariaLabel?: string;
/** Indicates busy/loading state for screen readers */
"aria-busy"?: boolean;
"aria-haspopup"?: React.AriaAttributes["aria-haspopup"];
"aria-expanded"?: boolean;
}
export const BrandButton = forwardRef<
HTMLButtonElement,
React.PropsWithChildren<BrandButtonProps>
>(function BrandButton(
{
testId,
name,
children,
variant,
type,
isDisabled,
className,
onClick,
startContent,
ariaLabel,
"aria-busy": ariaBusy,
"aria-haspopup": ariaHasPopup,
"aria-expanded": ariaExpanded,
},
ref,
) {
return (
<button
ref={ref}
name={name}
data-testid={testId}
disabled={isDisabled}
// The type is already passed as a prop to the button component
type={type}
onClick={onClick}
aria-label={ariaLabel}
aria-busy={ariaBusy}
aria-haspopup={ariaHasPopup}
aria-expanded={ariaExpanded}
className={cn(
formControlButtonClassName,
variant === "primary" &&
"bg-primary text-[var(--oh-color-base)] hover:opacity-80 disabled:bg-[var(--oh-interactive-hover)] disabled:text-[var(--oh-muted)] disabled:opacity-100",
variant === "secondary" &&
"border border-[var(--oh-border)] bg-base-secondary text-white hover:bg-surface-raised",
variant === "tertiary" &&
"bg-[var(--oh-interactive-hover)] text-white hover:opacity-80",
variant === "danger" && "bg-red-600 text-white hover:bg-red-700",
variant === "ghost-danger" &&
"h-auto min-h-0 bg-transparent px-0 text-red-600 underline hover:text-red-700 hover:no-underline font-normal",
startContent && "flex items-center justify-center gap-2",
className,
)}
>
{startContent}
{children}
</button>
);
});
|