fintech-component-library 2.0.6 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/Button.tsx +12 -2
package/package.json
CHANGED
|
@@ -3,10 +3,12 @@ import React from "react";
|
|
|
3
3
|
interface ButtonProps {
|
|
4
4
|
children: React.ReactNode;
|
|
5
5
|
onClick?: () => void;
|
|
6
|
-
variant?: "primary" | "secondary" | "danger";
|
|
7
|
-
size?: "sm" | "md" | "lg";
|
|
6
|
+
variant?: "primary" | "secondary" | "success" | "danger" | "neutral";
|
|
7
|
+
size?: "xs" | "sm" | "md" | "lg";
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
className?: string;
|
|
10
|
+
type?: "button" | "submit" | "reset";
|
|
11
|
+
title?: string;
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
const Button: React.FC<ButtonProps> = ({
|
|
@@ -16,6 +18,8 @@ const Button: React.FC<ButtonProps> = ({
|
|
|
16
18
|
size = "md",
|
|
17
19
|
disabled = false,
|
|
18
20
|
className = "",
|
|
21
|
+
type = "button",
|
|
22
|
+
title = "",
|
|
19
23
|
}) => {
|
|
20
24
|
const baseClasses =
|
|
21
25
|
"inline-flex items-center justify-center font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-200";
|
|
@@ -23,10 +27,14 @@ const Button: React.FC<ButtonProps> = ({
|
|
|
23
27
|
const variantClasses = {
|
|
24
28
|
primary: "bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500",
|
|
25
29
|
secondary: "bg-gray-600 hover:bg-gray-700 text-white focus:ring-gray-500",
|
|
30
|
+
success: "bg-green-600 hover:bg-green-700 text-white focus:ring-green-500",
|
|
26
31
|
danger: "bg-red-600 hover:bg-red-700 text-white focus:ring-red-500",
|
|
32
|
+
neutral:
|
|
33
|
+
"bg-slate-200 hover:bg-slate-300 text-slate-900 focus:ring-slate-400",
|
|
27
34
|
};
|
|
28
35
|
|
|
29
36
|
const sizeClasses = {
|
|
37
|
+
xs: "px-3 py-1 text-xs",
|
|
30
38
|
sm: "px-3 py-1.5 text-sm",
|
|
31
39
|
md: "px-4 py-2 text-base",
|
|
32
40
|
lg: "px-6 py-3 text-lg",
|
|
@@ -41,6 +49,8 @@ const Button: React.FC<ButtonProps> = ({
|
|
|
41
49
|
className={classes}
|
|
42
50
|
onClick={disabled ? undefined : onClick}
|
|
43
51
|
disabled={disabled}
|
|
52
|
+
type={type || "button"}
|
|
53
|
+
title={title}
|
|
44
54
|
>
|
|
45
55
|
{children}
|
|
46
56
|
</button>
|