diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index e5fd5fa..7928c33 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -22,6 +22,7 @@ type ButtonExtentions = { /* Component props */ /* -------------------------------------------------------------------------- */ type ButtonProps = { + defaultStyle?: boolean; emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high" disabled?: boolean; } & Omit, "">; @@ -30,6 +31,7 @@ type ButtonProps = { /* Component implementation */ /* -------------------------------------------------------------------------- */ export const Button: React.FC & ButtonExtentions = ({ + defaultStyle = true, emphasis = "high", disabled = false, className, @@ -62,17 +64,24 @@ export const Button: React.FC & ButtonExtentions = ({ }, { // Define high emphasis - [`${btnEmphasis.EnableHigh}`]: !disabled && emphasis === "high", - [`${btnEmphasis.DisabledHigh}`]: disabled && emphasis === "high", - [`${btnEmphasis.GeneralHigh}`]: emphasis === "high", - // Dbtnefine medium emphasis - [`${btnEmphasis.EnabledMedium}`]: !disabled && emphasis === "medium", - [`${btnEmphasis.DisabledMedium}`]: disabled && emphasis === "medium", - [`${btnEmphasis.GeneralMedium}`]: emphasis === "medium", - // Dbtnefine low emphasis - [`${btnEmphasis.EnabledLow}`]: !disabled && emphasis === "low", - [`${btnEmphasis.DisabledLow}`]: disabled && emphasis === "low", - [`${btnEmphasis.GenerealLow}`]: emphasis === "low", + [`${btnEmphasis.EnableHigh}`]: + defaultStyle && !disabled && emphasis === "high", + [`${btnEmphasis.DisabledHigh}`]: + defaultStyle && disabled && emphasis === "high", + [`${btnEmphasis.GeneralHigh}`]: defaultStyle && emphasis === "high", + // Define medium emphasis + [`${btnEmphasis.EnabledMedium}`]: + defaultStyle && !disabled && emphasis === "medium", + [`${btnEmphasis.DisabledMedium}`]: + defaultStyle && disabled && emphasis === "medium", + [`${btnEmphasis.GeneralMedium}`]: + defaultStyle && emphasis === "medium", + // Define low emphasis + [`${btnEmphasis.EnabledLow}`]: + defaultStyle && !disabled && emphasis === "low", + [`${btnEmphasis.DisabledLow}`]: + defaultStyle && disabled && emphasis === "low", + [`${btnEmphasis.GenerealLow}`]: defaultStyle && emphasis === "low", }, className, ])}