binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-4736] dev: propel button (#7746)

Browse source 
* dev: button added to propel

* dev: button story added

* chore: propel config updated

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
This commit is contained in:
Anmol Singh Bhatia 2025-09-10 00:34:17 +05:30 • committed by GitHub
parent 7e03264758
commit b0db4fcf10
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 196 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

73
packages/propel/src/button/button.tsx Normal file
View file

@ -0,0 +1,73 @@
import * as React from "react";
import { cn } from "../utils";
export enum EButtonVariant {
PRIMARY = "primary",
SECONDARY = "secondary",
OUTLINE = "outline",
GHOST = "ghost",
DESTRUCTIVE = "destructive",
}
export enum EButtonSize {
SM = "sm",
MD = "md",
LG = "lg",
}
export type TButtonVariant =
| EButtonVariant.PRIMARY
| EButtonVariant.SECONDARY
| EButtonVariant.OUTLINE
| EButtonVariant.GHOST
| EButtonVariant.DESTRUCTIVE;
export type TButtonSize = EButtonSize.SM | EButtonSize.MD | EButtonSize.LG;
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: TButtonVariant;
size?: TButtonSize;
className?: string;
children: React.ReactNode;
}
const buttonVariants = {
[EButtonVariant.PRIMARY]: "bg-custom-primary-100 text-white hover:bg-custom-primary-200 focus:bg-custom-primary-200",
[EButtonVariant.SECONDARY]:
"bg-custom-background-100 text-custom-text-200 border border-custom-border-200 hover:bg-custom-background-90 focus:bg-custom-background-90",
[EButtonVariant.OUTLINE]:
"border border-custom-primary-100 text-custom-primary-100 bg-transparent hover:bg-custom-primary-100/10 focus:bg-custom-primary-100/20",
[EButtonVariant.GHOST]: "text-custom-text-200 hover:bg-custom-background-90 focus:bg-custom-background-90",
[EButtonVariant.DESTRUCTIVE]: "bg-red-500 text-white hover:bg-red-600 focus:bg-red-600",
};
const buttonSizes = {
[EButtonSize.SM]: "px-3 py-1.5 text-xs font-medium",
[EButtonSize.MD]: "px-4 py-2 text-sm font-medium",
[EButtonSize.LG]: "px-6 py-2.5 text-base font-medium",
};
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ variant = EButtonVariant.PRIMARY, size = EButtonSize.MD, className, children, ...props }, ref) => (
<button
ref={ref}
className={cn(
// Base styles
"inline-flex items-center justify-center gap-2 rounded-md transition-colors duration-200",
"focus:outline-none focus:ring-2 focus:ring-custom-primary-100/20 focus:ring-offset-2",
"disabled:opacity-50 disabled:pointer-events-none",
// Variant styles
buttonVariants[variant],
// Size styles
buttonSizes[size],
className
)}
{...props}
>
{children}
</button>
)
);
Button.displayName = "Button";
export { Button };