t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 馃幍
tsiry-sandratraina.com
1import "./button.css";
2
3export interface ButtonProps {
4 /** Is this the principal call to action on the page? */
5 primary?: boolean;
6 /** What background color to use */
7 backgroundColor?: string;
8 /** How large should the button be? */
9 size?: "small" | "medium" | "large";
10 /** Button contents */
11 label: string;
12 /** Optional click handler */
13 onClick?: () => void;
14}
15
16/** Primary UI component for user interaction */
17export const Button = ({
18 primary = false,
19 size = "medium",
20 backgroundColor,
21 label,
22 ...props
23}: ButtonProps) => {
24 const mode = primary
25 ? "storybook-button--primary"
26 : "storybook-button--secondary";
27 return (
28 <button
29 type="button"
30 className={["storybook-button", `storybook-button--${size}`, mode].join(
31 " "
32 )}
33 style={{ backgroundColor }}
34 {...props}
35 >
36 {label}
37 </button>
38 );
39};