Skip to content

Instantly share code, notes, and snippets.

@mujsdev

mujsdev/Button.tsx

Created December 11, 2022 06:45
Show Gist options
  • Save mujsdev/c58cfdfb566861d5efd9352523ce28fa to your computer and use it in GitHub Desktop.
Save mujsdev/c58cfdfb566861d5efd9352523ce28fa to your computer and use it in GitHub Desktop.
Download ZIP
Button.tsx for Storybook
Raw
Button.tsx
import React from "react";
export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
children: React.ReactNode;
color: "black" | "white";
size?: "sm";
hasBorder?: boolean;
disabled?: boolean;
isLoading?: boolean;
}
export const Button = ({
children,
color = "black",
size,
hasBorder = false,
disabled = false,
isLoading = false,
...props
}: ButtonProps) => {
const hasBorderClass = hasBorder && `btn--border`;
const isLoadingClass = isLoading && `btn--loading`;
const classNames = `btn btn--${color} btn--${size} ${hasBorderClass} ${isLoadingClass}`;
return (
<button className={classNames} {...props} disabled={disabled}>
{children}
</button>
);
};
@d9k
Copy link

d9k commented Oct 16, 2023

Thanks, used for ladle + ladlescoop demo

@d9k
Copy link

d9k commented Oct 16, 2023

@mujsdev, BTW, how to make similar picture for GitHub profile?

Screenshot from 2023-10-16 07-49-42

@d9k
Copy link

d9k commented Nov 3, 2023

BTW, found it:
https://github.com/anuraghazra/github-readme-stats#top-languages-card

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment