Added danger button
This commit is contained in:
adilallo
@@ -37,6 +37,163 @@ export default function ComponentsPreview() {
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Button Section */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
Button Component
|
||||
</h2>
|
||||
|
||||
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
|
||||
<div className="space-y-[var(--spacing-scale-016)]">
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
All Variants
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
|
||||
<Button variant="default" size="medium">
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="secondary" size="medium">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button variant="primary" size="medium">
|
||||
Primary
|
||||
</Button>
|
||||
<Button variant="outlined" size="medium">
|
||||
Outlined
|
||||
</Button>
|
||||
<Button variant="dark" size="medium">
|
||||
Dark
|
||||
</Button>
|
||||
<Button variant="inverse" size="medium">
|
||||
Inverse
|
||||
</Button>
|
||||
<Button variant="ghost" size="medium">
|
||||
Ghost
|
||||
</Button>
|
||||
<Button variant="danger" size="medium">
|
||||
Danger
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="medium">
|
||||
Danger Inverse
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
All Sizes - Danger Variant
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
|
||||
<Button variant="danger" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="danger" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="danger" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="danger" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="danger" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
All Sizes - Danger Inverse Variant
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
|
||||
<Button variant="danger-inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
All Sizes - Ghost Variant
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-scale-012)] items-center">
|
||||
<Button variant="ghost" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="ghost" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="ghost" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="ghost" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="ghost" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
States - Danger Variant
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
|
||||
<Button variant="danger" size="medium">
|
||||
Normal
|
||||
</Button>
|
||||
<Button variant="danger" size="medium" disabled>
|
||||
Disabled
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
States - Danger Inverse Variant
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
|
||||
<Button variant="danger-inverse" size="medium">
|
||||
Normal
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="medium" disabled>
|
||||
Disabled
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
|
||||
States - Ghost Variant
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-[var(--spacing-scale-012)]">
|
||||
<Button variant="ghost" size="medium">
|
||||
Normal
|
||||
</Button>
|
||||
<Button variant="ghost" size="medium" disabled>
|
||||
Disabled
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Tooltip Section */}
|
||||
<section className="space-y-[var(--spacing-scale-024)]">
|
||||
<h2 className="font-bricolage-grotesque text-[32px] leading-[40px] font-bold text-[var(--color-content-default-primary)]">
|
||||
|
||||
@@ -9,7 +9,9 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
| "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<ButtonProps>(
|
||||
"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<string, string> = {
|
||||
@@ -82,13 +88,15 @@ const Button = memo<ButtonProps>(
|
||||
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];
|
||||
|
||||
|
||||
@@ -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 = {
|
||||
<Button {..._args} variant="ghost">
|
||||
Ghost
|
||||
</Button>
|
||||
<Button {..._args} variant="danger">
|
||||
Danger
|
||||
</Button>
|
||||
<Button {..._args} variant="danger-inverse">
|
||||
Danger Inverse
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
@@ -292,6 +300,48 @@ export const AllVariants = {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Danger Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="danger" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="danger" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="danger" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="danger" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="danger" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Danger Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="danger-inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
|
||||
<div className="space-x-4">
|
||||
@@ -316,6 +366,12 @@ export const AllVariants = {
|
||||
<Button variant="ghost" size="large" disabled>
|
||||
Ghost Disabled
|
||||
</Button>
|
||||
<Button variant="danger" size="large" disabled>
|
||||
Danger Disabled
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="large" disabled>
|
||||
Danger Inverse Disabled
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user