diff --git a/app/components-preview/page.tsx b/app/components-preview/page.tsx index ac3f7ae..c9cae7c 100644 --- a/app/components-preview/page.tsx +++ b/app/components-preview/page.tsx @@ -37,6 +37,163 @@ export default function ComponentsPreview() {

+ {/* Button Section */} +
+

+ Button Component +

+ +
+
+
+

+ All Variants +

+
+ + + + + + + + + +
+
+ +
+

+ All Sizes - Danger Variant +

+
+ + + + + +
+
+ +
+

+ All Sizes - Danger Inverse Variant +

+
+ + + + + +
+
+ +
+

+ All Sizes - Ghost Variant +

+
+ + + + + +
+
+ +
+

+ States - Danger Variant +

+
+ + +
+
+ +
+

+ States - Danger Inverse Variant +

+
+ + +
+
+ +
+

+ States - Ghost Variant +

+
+ + +
+
+
+
+
+ {/* Tooltip Section */}

diff --git a/app/components/Button.tsx b/app/components/Button.tsx index 10e6826..9720495 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -9,7 +9,9 @@ interface ButtonProps extends React.ButtonHTMLAttributes { | "outlined" | "dark" | "inverse" - | "ghost"; + | "ghost" + | "danger" + | "danger-inverse"; size?: "xsmall" | "small" | "medium" | "large" | "xlarge"; className?: string; disabled?: boolean; @@ -72,6 +74,10 @@ const Button = memo( "bg-transparent text-[var(--color-content-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-tertiary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", ghost: "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-secondary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-secondary)] active:text-[var(--color-content-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-transparent disabled:text-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", + danger: + "bg-transparent text-[var(--color-border-default-negative-primary)] border border-[var(--color-border-default-negative-primary)] hover:bg-[var(--color-surface-invert-negative-secondary)] hover:text-[var(--color-border-default-negative-primary)] hover:border-[var(--color-border-default-negative-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-border-default-negative-primary)] focus:outline-none focus:border-[var(--color-border-default-negative-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-invert-negative-primary)] active:text-[var(--color-content-invert-negative-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", + "danger-inverse": + "bg-transparent text-[var(--color-content-invert-negative-primary)] border border-[var(--color-border-invert-negative-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-negative-primary)] hover:border-[var(--color-border-invert-negative-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-invert-negative-primary)] focus:outline-none focus:border-[var(--color-border-invert-negative-primary)] focus:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-negative-primary)] active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100", }; const hoverOutlineStyles: Record = { @@ -82,13 +88,15 @@ const Button = memo( xlarge: "hover:outline-[2.5px]", }; - // Only apply outline styles to default and secondary variants, not primary, outlined, dark, inverse, or ghost + // Only apply outline styles to default and secondary variants, not primary, outlined, dark, inverse, ghost, danger, or danger-inverse const outlineStyles = variant === "primary" || variant === "outlined" || variant === "dark" || variant === "inverse" || - variant === "ghost" + variant === "ghost" || + variant === "danger" || + variant === "danger-inverse" ? "" : hoverOutlineStyles[size]; diff --git a/stories/Button.stories.js b/stories/Button.stories.js index cf525ab..79a4588 100644 --- a/stories/Button.stories.js +++ b/stories/Button.stories.js @@ -23,6 +23,8 @@ export default { "dark", "inverse", "ghost", + "danger", + "danger-inverse", ], description: "The visual style variant of the button", }, @@ -79,6 +81,12 @@ export const Variants = { + + ), @@ -292,6 +300,48 @@ export const AllVariants = { +
+

Danger Variant

+
+ + + + + +
+
+ +
+

Danger Inverse Variant

+
+ + + + + +
+
+

Disabled States

@@ -316,6 +366,12 @@ export const AllVariants = { + +