CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-04 21:04:37 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix button

Browse Source
This commit is contained in:
Madison 2025-10-10 13:06:02 -05:00
parent e2e2b22d94
commit d8ef95cdfb
1 changed files with 48 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
docs/src/components/mdx/button.tsx
View File

@ -3,54 +3,68 @@ import * as React from "react";
import { cn } from "../../lib/cn";
import { buttonVariants } from "../ui/button";
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
type BaseButtonProps = {
color?: 'primary' | 'secondary' | 'outline' | 'ghost',
size?: 'sm' | 'icon' | 'icon-sm',
icon?: React.ReactNode,
href?: string,
children: React.ReactNode,
}
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, color = 'secondary', size = 'sm', icon, href, children, ...props }, ref) => {
const buttonContent = (
<>
{icon && <span className="inline-flex items-center justify-center w-3.5 h-3.5">{icon}</span>}
{children}
</>
);
type ButtonAsButton = BaseButtonProps &
React.ButtonHTMLAttributes<HTMLButtonElement> & {
href?: never,
};
const buttonClasses = cn(
buttonVariants({
color,
size,
className: 'gap-2 no-underline hover:no-underline'
}),
className
);
type ButtonAsLink = BaseButtonProps &
React.AnchorHTMLAttributes<HTMLAnchorElement> & {
href: string,
};
if (href) {
return (
<a role="button"
href={href}
className={buttonClasses}
{...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
>
{buttonContent}
</a>
);
}
type ButtonProps = ButtonAsButton | ButtonAsLink;
export const Button = React.forwardRef<
HTMLButtonElement | HTMLAnchorElement,
ButtonProps
>(({ className, color = 'secondary', size = 'sm', icon, href, children, ...props }, ref) => {
const buttonContent = (
<>
{icon && <span className="inline-flex items-center justify-center w-3.5 h-3.5">{icon}</span>}
{children}
</>
);
const buttonClasses = cn(
buttonVariants({
color,
size,
className: 'gap-2 no-underline hover:no-underline'
}),
className
);
if (href) {
return (
<button
ref={ref}
<a
role="button"
href={href}
className={buttonClasses}
{...props}
ref={ref as React.Ref<HTMLAnchorElement>}
{...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
>
{buttonContent}
</button>
</a>
);
}
);
return (
<button
ref={ref as React.Ref<HTMLButtonElement>}
className={buttonClasses}
{...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
>
{buttonContent}
</button>
);
});
Button.displayName = "Button";