R3ap3r
3178b8f4f7
- Spotify playlist, library, album and artist browsing with in-app playback - Song, playlist and album downloads via spotdl with YouTube and Bandcamp fallbacks - Electron desktop app (castLabs Widevine) with a permanent sidebar layout - Linux and Windows packaging scripts
54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import { Slot } from "@radix-ui/react-slot";
|
|
import styles from "./Button.module.css";
|
|
|
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?:
|
|
| "primary"
|
|
| "outline"
|
|
| "ghost"
|
|
| "link"
|
|
| "secondary"
|
|
| "destructive";
|
|
size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-md" | "icon-lg";
|
|
asChild?: boolean;
|
|
}
|
|
|
|
export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
(
|
|
{
|
|
children,
|
|
variant = "primary",
|
|
size = "md",
|
|
asChild = false,
|
|
className,
|
|
disabled,
|
|
type = "button",
|
|
...props
|
|
},
|
|
ref,
|
|
) => {
|
|
const Comp = asChild ? Slot : "button";
|
|
|
|
return (
|
|
<Comp
|
|
ref={ref}
|
|
type={type}
|
|
className={`
|
|
${styles.button}
|
|
${styles[variant]}
|
|
${styles[size]}
|
|
${disabled ? styles.disabled : ""}
|
|
${className || ""}
|
|
`}
|
|
disabled={disabled}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Comp>
|
|
);
|
|
},
|
|
);
|
|
|
|
Button.displayName = "Button";
|