@qoretechnologies/reqore 0.30.4 → 0.30.5

package/src/components/Button/index.tsx

@@ -11,7 +11,7 @@ import {
 import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
 import ReqoreContext from '../../context/ReqoreContext';
 import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
-import { getOneLessSize } from '../../helpers/utils';
+import { alignToFlexAlign, getOneLessSize } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreEffect } from '../../hooks/useReqoreEffect';
 import { useReqoreTheme } from '../../hooks/useTheme';
@@ -33,6 +33,7 @@ import {
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import {
+  IReqoreEffect,
   ReqoreTextEffect,
   StyledEffect,
   StyledTextEffect,
@@ -70,6 +71,8 @@ export interface IReqoreButtonProps
   iconColor?: TReqoreEffectColor;
   leftIconColor?: TReqoreEffectColor;
   rightIconColor?: TReqoreEffectColor;
+  labelEffect?: IReqoreEffect;
+  descriptionEffect?: IReqoreEffect;
 }
 
 export interface IReqoreButtonStyle extends Omit<IReqoreButtonProps, 'intent'> {
@@ -89,10 +92,13 @@ const getButtonMainColor = (theme: IReqoreTheme, color?: TReqoreHexColor) => {
 export const StyledAnimatedTextWrapper = styled.span`
   overflow: hidden;
   position: relative;
-  text-align: left;
+  text-align: ${({ textAlign }) => textAlign};
+  display: flex;
+  flex-flow: column;
+  align-items: ${({ textAlign }) => alignToFlexAlign(textAlign)};
 `;
 
-export const StyledActiveContent = styled.span`
+export const StyledActiveContent = styled(StyledTextEffect)`
   position: absolute;
   transform: translateY(-150%);
   opacity: 0;
@@ -112,7 +118,7 @@ export const StyledActiveContent = styled.span`
         `}
 `;
 
-export const StyledInActiveContent = styled.span`
+export const StyledInActiveContent = styled(StyledTextEffect)`
   position: absolute;
   transform: translateY(0);
   transition: all 0.2s ease-out;
@@ -130,7 +136,7 @@ export const StyledInActiveContent = styled.span`
         `}
 `;
 
-export const StyledInvisibleContent = styled.span`
+export const StyledInvisibleContent = styled(StyledTextEffect)`
   visibility: hidden;
   position: relative;
   overflow: hidden;
@@ -161,7 +167,6 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
 
   min-height: ${({ size }) => SIZE_TO_PX[size]}px;
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
-  width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
   max-width: ${({ maxWidth, fluid, fixed }) => maxWidth || (fluid && !fixed ? '100%' : undefined)};
   ${({ wrap, description }) =>
     !wrap && !description
@@ -171,6 +176,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
       : null}
 
   flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
+  align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
 
   border-radius: ${({ size }) => RADIUS_FROM_SIZE[size]}px;
 
@@ -241,24 +247,32 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
         `
       : undefined}
 
-  ${({ active, flat, theme, color }: IReqoreButtonStyle) =>
-    active &&
-    css`
-      cursor: pointer;
-      background-color: ${changeLightness(getButtonMainColor(theme, color), 0.1)};
-      color: ${getReadableColor({ main: getButtonMainColor(theme, color) }, undefined, undefined)};
-      border-color: ${flat ? undefined : changeLightness(getButtonMainColor(theme, color), 0.175)};
-
-      &:hover,
-      &:active,
-      &:focus {
+  ${({ active, flat, theme, color }: IReqoreButtonStyle) => {
+    if (active) {
+      return css`
+        cursor: pointer;
+        background-color: ${changeLightness(getButtonMainColor(theme, color), 0.1)};
+        color: ${getReadableColor(
+          { main: changeLightness(getButtonMainColor(theme, color), 0.1) },
+          undefined,
+          undefined
+        )};
         border-color: ${flat
           ? undefined
-          : changeLightness(getButtonMainColor(theme, color), 0.275)};
-      }
-
-      ${ActiveIconScale}
-    `}
+          : changeLightness(getButtonMainColor(theme, color), 0.175)};
+
+        &:hover,
+        &:active,
+        &:focus {
+          border-color: ${flat
+            ? undefined
+            : changeLightness(getButtonMainColor(theme, color), 0.275)};
+        }
+
+        ${ActiveIconScale}
+      `;
+    }
+  }}
 
   &:disabled {
     ${DisabledElement};
@@ -274,7 +288,7 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
       minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.4)};
   }
 
-  ${StyledTextEffect} {
+  .reqore-button-description {
     padding-bottom: ${({ size }) => PADDING_FROM_SIZE[getOneLessSize(size)]}px;
   }
 `;
@@ -371,6 +385,8 @@ const ReqoreButton = memo(
         maxWidth,
         textAlign = 'left',
         effect,
+        labelEffect,
+        descriptionEffect,
         leftIconColor,
         rightIconColor,
         iconColor,
@@ -398,10 +414,14 @@ const ReqoreButton = memo(
       return (
         <StyledButton
           {...rest}
-          effect={{
-            interactive: !readOnly && !rest.disabled,
-            ...fixedEffect,
-          }}
+          effect={
+            intent
+              ? undefined
+              : {
+                  interactive: !readOnly && !rest.disabled,
+                  ...fixedEffect,
+                }
+          }
           as='button'
           theme={theme}
           ref={targetRef}
@@ -422,7 +442,12 @@ const ReqoreButton = memo(
           <StyledButtonContent size={size} wrap={wrap} description={description} flat={_flat}>
             {icon && (
               <>
-                <ReqoreIcon icon={icon} size={size} color={leftIconColor || iconColor} />
+                <ReqoreIcon
+                  icon={icon}
+                  size={size}
+                  color={leftIconColor || iconColor}
+                  style={textAlign !== 'left' ? { marginRight: 'auto' } : undefined}
+                />
                 {children || badge || rightIcon ? (
                   <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
                 ) : null}
@@ -430,9 +455,15 @@ const ReqoreButton = memo(
             )}
             {children && (
               <StyledAnimatedTextWrapper textAlign={textAlign}>
-                <StyledActiveContent wrap={wrap}>{children}</StyledActiveContent>
-                <StyledInActiveContent wrap={wrap}>{children}</StyledInActiveContent>
-                <StyledInvisibleContent wrap={wrap}>{children}</StyledInvisibleContent>
+                <StyledActiveContent wrap={wrap} effect={labelEffect}>
+                  {children}
+                </StyledActiveContent>
+                <StyledInActiveContent wrap={wrap} effect={labelEffect}>
+                  {children}
+                </StyledInActiveContent>
+                <StyledInvisibleContent wrap={wrap} effect={labelEffect}>
+                  {children}
+                </StyledInvisibleContent>
                 {(badge || badge === 0) && wrap ? (
                   <ButtonBadge content={badge} size={size} color={color} wrap />
                 ) : null}
@@ -447,7 +478,7 @@ const ReqoreButton = memo(
                 <ReqoreIcon
                   icon={rightIcon}
                   size={size}
-                  style={{ marginLeft: 'auto' }}
+                  style={textAlign !== 'right' ? { marginLeft: 'auto' } : undefined}
                   color={rightIconColor || iconColor}
                 />
               </>
@@ -456,11 +487,13 @@ const ReqoreButton = memo(
 
           {description && (
             <ReqoreTextEffect
+              className='reqore-button-description'
               effect={{
                 textSize: getOneLessSize(size),
                 weight: 'light',
                 color: `${color}90`,
                 textAlign,
+                ...descriptionEffect,
               }}
             >
               {description}

package/src/components/Checkbox/index.tsx

@@ -137,7 +137,8 @@ const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
   height: ${({ size }) => SIZE_TO_PX[size]}px;
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 
-  flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1' : '0 0 auto')};
+  max-width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
+  flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 0 auto')};
 
   ${({ disabled }) =>
     disabled &&

package/src/components/ControlGroup/index.tsx

@@ -47,6 +47,7 @@ export interface IReqoreControlGroupProps
   isChild?: boolean;
   isFirstGroup?: boolean;
   isLastGroup?: boolean;
+  fill?: boolean;
 }
 
 export interface IReqoreControlGroupStyle extends IReqoreControlGroupProps {
@@ -55,7 +56,7 @@ export interface IReqoreControlGroupStyle extends IReqoreControlGroupProps {
 
 export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
   display: flex;
-  flex: 0 auto;
+  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
   width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
   justify-content: ${({ fluid, vertical }) => (vertical && fluid ? 'stretch' : undefined)};
   align-items: ${({ vertical, fluid, horizontalAlign }) =>
@@ -64,11 +65,29 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
   gap: ${({ gapSize, stack }) => (!stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined)};
   flex-wrap: ${({ wrap }) => (wrap ? 'wrap' : 'nowrap')};
 
+  // If the group has the fill prop,
+  // we need to make sure that the children are vertically stretched
+  // kind of like 'fluid' but vertically
+  // ! Only works when the group is horizontal & wrap is false
+  ${({ fill, vertical }) => {
+    if (fill && !vertical) {
+      return css`
+        > * {
+          max-height: 100%;
+          height: unset !important;
+          align-self: stretch;
+        }
+      `;
+    }
+
+    return undefined;
+  }}
+
   > * {
-    margin-top: ${({ verticalAlign }) =>
-      verticalAlign === 'flex-end' || verticalAlign === 'center' ? 'auto' : undefined};
-    margin-bottom: ${({ verticalAlign }) =>
-      verticalAlign === 'flex-start' || verticalAlign === 'center' ? 'auto' : undefined};
+    margin-top: ${({ fill, verticalAlign }) =>
+      !fill && (verticalAlign === 'flex-end' || verticalAlign === 'center') ? 'auto' : undefined};
+    margin-bottom: ${({ fill, verticalAlign }) =>
+      !fill && (verticalAlign === 'flex-start' || verticalAlign === 'center') ? 'auto' : undefined};
     margin-right: ${({ horizontalAlign }) => (horizontalAlign === 'center' ? 'auto' : undefined)};
 
     ${({ vertical }) =>
@@ -103,6 +122,7 @@ const ReqoreControlGroup = memo(
     fluid,
     flat,
     fixed,
+    fill,
     rounded = true,
     wrap,
     stack,
@@ -324,6 +344,7 @@ const ReqoreControlGroup = memo(
               flat: child.props?.flat || child.props?.flat === false ? child.props.flat : flat,
               fluid: child.props?.fluid || child.props?.fluid === false ? child.props.fluid : fluid,
               fixed: child.props?.fixed || child.props?.fixed === false ? child.props.fixed : fixed,
+              fill,
               stack:
                 child.props?.stack || child.props?.stack === false ? child.props.stack : isStack,
               intent: child.props?.intent || intent,
@@ -454,6 +475,7 @@ const ReqoreControlGroup = memo(
           rounded={rounded}
           fluid={fluid}
           fixed={fixed}
+          fill={fill}
           wrap={wrap}
           stack={isStack}
           verticalAlign={verticalAlign}

package/src/components/Effect/index.tsx

@@ -114,10 +114,16 @@ export const StyledEffect = styled.span`
     const gradientColors = createEffectGradient(
       theme,
       effect.gradient.colors,
-      0,
+      minimal ? 0.05 : 0,
       !isText && minimal && !active
     );
-    const gradientColorsActive = createEffectGradient(theme, effect.gradient.colors, 0.05);
+    const gradientColorsActive = createEffectGradient(
+      theme,
+      effect.gradient.colors,
+      0.05,
+      minimal,
+      true
+    );
 
     const gradientDirectionOrShape =
       gradientType === 'linear'
@@ -167,16 +173,17 @@ export const StyledEffect = styled.span`
       background: ${active ? gradientActive : gradient};
       border-color: ${borderColor} !important;
 
-      ${color &&
-      css`
-        color: ${getReadableColorFrom(getColorFromMaybeString(theme, color), false)} !important;
-        &::placeholder {
-          color: ${rgba(
-            getReadableColorFrom(getColorFromMaybeString(theme, color), false),
-            0.7
-          )} !important;
-        }
-      `}
+      ${color && !minimal
+        ? css`
+            color: ${getReadableColorFrom(getColorFromMaybeString(theme, color), false)} !important;
+            &::placeholder {
+              color: ${rgba(
+                getReadableColorFrom(getColorFromMaybeString(theme, color), false),
+                0.7
+              )} !important;
+            }
+          `
+        : undefined}
 
       ${effect.gradient.animate === 'always' || (effect.gradient.animate === 'active' && active)
         ? css`
@@ -365,9 +372,9 @@ export const ReqoreEffect = ({ children, ...rest }: IReqoreTextEffectProps) => {
   );
 };
 
-export const ReqoreTextEffect = ({ children, ...rest }: IReqoreTextEffectProps) => {
+export const ReqoreTextEffect = ({ children, className, ...rest }: IReqoreTextEffectProps) => {
   return (
-    <StyledTextEffect className='reqore-text-effect' {...rest}>
+    <StyledTextEffect className={`${className || ''} reqore-text-effect`} {...rest}>
       {children}
     </StyledTextEffect>
   );

package/src/components/Input/index.tsx

@@ -60,10 +60,11 @@ export interface IReqoreInputStyle extends IReqoreInputProps {
 
 export const StyledInputWrapper = styled.div<IReqoreInputStyle>`
   height: ${({ _size }) => SIZE_TO_PX[_size]}px;
-  width: ${({ width, fluid, fixed }) => (width ? `${width}px` : fluid && !fixed ? '100%' : 'auto')};
+  width: ${({ width }) => (width ? `${width}px` : 'auto')};
   max-width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
   min-width: 60px;
   flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 1 auto')};
+  align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
   font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
   position: relative;
   overflow: hidden;

package/src/components/Table/header.tsx

@@ -2,9 +2,9 @@ import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness } from '../../helpers/colors';
+import { alignToFlexAlign } from '../../helpers/utils';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreTableHeaderCell, { StyledTableHeader } from './headerCell';
-import { alignToFlex } from './row';
 
 export interface IReqoreTableSectionProps {
   columns: IReqoreTableColumn[];
@@ -46,7 +46,7 @@ export interface IReqoreTableHeaderStyle {
 export const StyledColumnGroupHeader = styled.div<IReqoreTableHeaderStyle>`
   ${({ align, theme }) => css`
     background-color: ${changeLightness(theme.main, 0.035)};
-    justify-content: ${align ? alignToFlex[align] : 'flex-start'};
+    justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
   `}
 `;
 

package/src/components/Table/headerCell.tsx

@@ -4,9 +4,9 @@ import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness, getReadableColor } from '../../helpers/colors';
+import { alignToFlexAlign } from '../../helpers/utils';
 import { useTooltip } from '../../hooks/useTooltip';
 import ReqoreIcon from '../Icon';
-import { alignToFlex } from './row';
 
 export interface IReqoreTableHeaderCellProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -32,7 +32,7 @@ export const StyledTableHeader = styled.div<IReqoreTableHeaderStyle>`
 
   ${({ align, theme }) => css`
     background-color: ${changeLightness(theme.main, 0.03)};
-    justify-content: ${align ? alignToFlex[align] : 'flex-start'};
+    justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
   `}
 
   ${({ interactive, theme }) =>

package/src/components/Table/row.tsx

@@ -13,6 +13,7 @@ import { ReqorePopover } from '../..';
 import { SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { changeLightness, getReadableColorFrom } from '../../helpers/colors';
+import { alignToFlexAlign } from '../../helpers/utils';
 import { TReqoreColor, TReqoreHexColor } from '../Effect';
 import { ReqoreH4 } from '../Header';
 import ReqoreIcon from '../Icon';
@@ -75,12 +76,6 @@ export interface IReqoreTableCellStyle {
   striped?: boolean;
 }
 
-export const alignToFlex = {
-  center: 'center',
-  left: 'flex-start',
-  right: 'flex-end',
-};
-
 export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
   ${({ width, grow }) =>
     css`
@@ -137,7 +132,7 @@ export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
     return css`
       display: flex;
       align-items: center;
-      justify-content: ${align ? alignToFlex[align] : 'flex-start'};
+      justify-content: ${align ? alignToFlexAlign(align) : 'flex-start'};
       flex-shrink: 0;
       border-bottom: ${!flat ? '1px solid ' : undefined};
 

package/src/components/Tabs/list.tsx

@@ -204,10 +204,10 @@ const ReqoreTabsList = ({
                     label: getMoreLabel(item, activeTab),
                     active: !!isTabHidden(item, activeTab),
                     activeIntent: activeTabIntent,
+                    intent: !!isTabHidden(item, activeTab) ? activeTabData?.intent : undefined,
+                    effect: !!isTabHidden(item, activeTab) ? activeTabData?.effect : undefined,
                     customTheme: !!isTabHidden(item, activeTab)
-                      ? {
-                          main: currentTabColor,
-                        }
+                      ? activeTabData?.customTheme
                       : theme,
                     vertical,
                     flat,

package/src/components/Tag/index.tsx

@@ -86,8 +86,9 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
-  width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
+  max-width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
   flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
+  align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
   border-radius: ${({ asBadge, size }) => (asBadge ? 18 : RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
@@ -274,6 +275,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
         {...rest}
         effect={{
           ...rest.effect,
+          gradient: intent ? undefined : rest.effect?.gradient,
           interactive: !!onClick && !rest.disabled,
         }}
         width={width}

package/src/helpers/colors.ts

@@ -96,6 +96,9 @@ export const buildTheme = (theme: IReqoreTheme): IReqoreTheme => {
     newTheme.main = '#333333';
   }
 
+  // Add the original theme main color to the theme
+  newTheme.originalMain = newTheme.main;
+
   if (!newTheme.notifications?.info) {
     newTheme.notifications.info = newTheme.intents.info || DEFAULT_INTENTS.info;
   }
@@ -200,7 +203,8 @@ export const createEffectGradient = (
   theme: IReqoreTheme,
   colors: TReqoreEffectGradientColors,
   lighten: number = 0,
-  minimal?: boolean
+  minimal?: boolean,
+  active?: boolean
 ): string => {
   let _colors: TReqoreEffectGradientColorsObject;
   // Check if the colors are valid
@@ -219,7 +223,9 @@ export const createEffectGradient = (
     (colorsString, color, percentage) => {
       return `${colorsString}, ${
         minimal
-          ? theme.originalMain
+          ? active
+            ? theme.originalMain
+            : changeLightness(theme.originalMain, lighten)
           : changeLightness(getColorFromMaybeString(theme, color), lighten)
       } ${percentage}%`;
     },

package/src/helpers/utils.ts

@@ -91,3 +91,18 @@ export const getOneLessSize = (size: TSizes): TSizes => {
 };
 
 export const isActionShown = (action: IReqorePanelAction) => action.show !== false;
+
+export const alignToFlexAlign = (
+  align: 'left' | 'right' | 'center'
+): 'flex-start' | 'center' | 'flex-end' => {
+  switch (align) {
+    case 'left':
+      return 'flex-start';
+    case 'right':
+      return 'flex-end';
+    case 'center':
+      return 'center';
+    default:
+      return 'flex-start';
+  }
+};

package/src/stories/Button/Button.stories.tsx

@@ -72,6 +72,38 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
+      <ReqoreControlGroup fluid wrap>
+        <ReqoreButton {...buttonProps}>Left text</ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          textAlign='center'
+          maxWidth='250px'
+          badge='10'
+          wrap
+          description='I am a button with a center aligned text and description'
+        >
+          Center
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          textAlign='center'
+          maxWidth='200px'
+          badge="I'm a badge, baby"
+          wrap
+          description='I am a button with a center aligned text and description'
+        >
+          Center text with a longer text
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          textAlign='right'
+          badge="I'm a badge"
+          description='I am a button with a right aligned text and description'
+        >
+          Right text
+        </ReqoreButton>
+      </ReqoreControlGroup>
+      <br />
       <ReqoreControlGroup wrap>
         <ReqoreButton
           {...buttonProps}
@@ -95,8 +127,22 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
         <ReqoreButton
           {...buttonProps}
+          minimal
           description='This is a very interesting description for a button, I like it very much'
           maxWidth='200px'
+          labelEffect={{
+            gradient: { colors: { 0: '#00fafd', 130: '#eb0e8c' }, direction: 'to right bottom' },
+          }}
+          descriptionEffect={{
+            gradient: { colors: { 0: '#fd7600', 90: '#c997ff' }, type: 'radial' },
+          }}
+          effect={{
+            gradient: {
+              colors: { 0: '#be00fd', 130: '#e70eeb' },
+              direction: 'to left bottom',
+              animate: 'hover',
+            },
+          }}
           badge={{
             effect: {
               gradient: { colors: { 0: '#00fafd', 130: '#eb0e8c' }, direction: 'to right bottom' },
@@ -121,7 +167,18 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
           Read only with badge
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} minimal badge={20} onClick={alert}>
+        <ReqoreButton
+          {...buttonProps}
+          minimal
+          badge={20}
+          onClick={alert}
+          effect={{
+            gradient: { colors: { 90: '#ffe69c', 0: '#ff7818' }, type: 'radial' },
+          }}
+          labelEffect={{
+            gradient: { colors: { 0: '#ffe69c', 90: '#ff7818' }, type: 'radial' },
+          }}
+        >
           Minimal with badge
         </ReqoreButton>
         <ReqoreButton