108 lines
4.1 KiB
TypeScript
108 lines
4.1 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* Link Button — https://app.subframe.com/f023064a5ca0/library?component=Link+Button_a4ee726a-774c-4091-8c49-55b659356024
|
|
*/
|
|
|
|
import React from "react";
|
|
import { FeatherArrowRight } from "@subframe/core";
|
|
import * as SubframeCore from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
|
|
export interface LinkButtonRootProps
|
|
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
disabled?: boolean;
|
|
variant?: "primary" | "subtle";
|
|
size?: "large" | "medium" | "small";
|
|
icon?: React.ReactNode;
|
|
children?: React.ReactNode;
|
|
iconRight?: React.ReactNode;
|
|
hideIcon?: boolean;
|
|
underline?: boolean;
|
|
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
className?: string;
|
|
}
|
|
|
|
const LinkButtonRoot = React.forwardRef<HTMLButtonElement, LinkButtonRootProps>(
|
|
function LinkButtonRoot(
|
|
{
|
|
disabled = false,
|
|
variant = "primary",
|
|
size = "medium",
|
|
icon = null,
|
|
children,
|
|
iconRight = <FeatherArrowRight />,
|
|
hideIcon = false,
|
|
underline = false,
|
|
className,
|
|
type = "button",
|
|
...otherProps
|
|
}: LinkButtonRootProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<button
|
|
className={SubframeUtils.twClassNames(
|
|
"group/a4ee726a flex cursor-pointer items-center gap-2 border-none bg-transparent text-left",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
type={type}
|
|
disabled={disabled}
|
|
{...otherProps}
|
|
>
|
|
{icon ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-regular-150 font-body-default-regular-150 text-icon-feedback-link-default group-hover/a4ee726a:text-icon-feedback-link-hover group-active/a4ee726a:text-icon-feedback-link-active group-disabled/a4ee726a:text-icon-neutral-disabled",
|
|
{
|
|
hidden: hideIcon,
|
|
"text-body-small-regular-150 font-body-small-regular-150":
|
|
size === "small",
|
|
"text-body-large font-body-large": size === "large",
|
|
"text-icon-neutral-primary": variant === "subtle",
|
|
}
|
|
)}
|
|
>
|
|
{icon}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
{children ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-regular-0 font-body-default-regular-0 text-text-feedback-link-default group-hover/a4ee726a:text-text-feedback-link-hover group-active/a4ee726a:text-text-feedback-link-active group-disabled/a4ee726a:text-text-neutral-disabled group-hover/a4ee726a:group-disabled/a4ee726a:text-text-neutral-disabled group-active/a4ee726a:group-disabled/a4ee726a:text-text-neutral-disabled",
|
|
{
|
|
underline: underline,
|
|
"text-body-small-regular-0 font-body-small-regular-0":
|
|
size === "small",
|
|
"text-body-large-0 font-body-large-0": size === "large",
|
|
"text-text-neutral-primary": variant === "subtle",
|
|
}
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
) : null}
|
|
{iconRight ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-regular-0 font-body-default-regular-0 text-icon-feedback-link-default group-hover/a4ee726a:text-icon-feedback-link-hover group-active/a4ee726a:text-icon-feedback-link-active group-disabled/a4ee726a:text-icon-neutral-disabled group-hover/a4ee726a:group-disabled/a4ee726a:text-icon-neutral-disabled group-active/a4ee726a:group-disabled/a4ee726a:text-text-neutral-disabled",
|
|
{
|
|
hidden: hideIcon,
|
|
"text-body-small-regular-150 font-body-small-regular-150":
|
|
size === "small",
|
|
"text-body-large font-body-large": size === "large",
|
|
"text-icon-neutral-primary": variant === "subtle",
|
|
}
|
|
)}
|
|
>
|
|
{iconRight}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
</button>
|
|
);
|
|
}
|
|
);
|
|
|
|
export const LinkButton = LinkButtonRoot;
|