# hostinger/3.0.6/vue-frontend/src/components/Button/configuration.ts

Hostinger Tools, version 3.0.6. 164 lines.

- Page: https://pluginprobe.com/plugins/hostinger/3.0.6/code/vue-frontend/src/components/Button/configuration.ts
- Raw: https://pluginprobe.com/plugins/hostinger/3.0.6/raw/vue-frontend/src/components/Button/configuration.ts
- Modified: 2024-06-04T12:01:14+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/hostinger/3.0.6/code/vue-frontend/src/components/Button/configuration.ts#L10-L20`.

```typescript
import type { ButtonSize, IButtonVariantConfiguration } from '@/types';

export const BUTTON_SIZE_CONFIGURATION: Record<
  ButtonSize,
  { padding: string }
> = {
  small: {
    padding: '6px 16px',
  },
  medium: {
    padding: '8px 24px',
  },
  large: {
    padding: '12px 32px',
  },
};

export const BUTTON_ICON_CONFIGURATION = {
  small: {
    size: 16,
  },
  medium: {
    size: 24,
  },
  large: {
    size: 24,
  },
};

export const BUTTON_LOADER_DIMENSION_CONFIGURATION = {
  small: { size: '20px', border: '3px' },
  medium: { size: '24px', border: '4px' },
  large: { size: '32px', border: '5px' },
};

export const BUTTON_VARIANT_CONFIGURATION: IButtonVariantConfiguration = {
  contain: {
    primary: {
      backgroundColor: 'primary',
      hoverBackgroundColor: 'primary-dark',
      border: 'none',
      color: 'white',
      disabled: {
        color: 'white',
        backgroundColor: 'gray',
      },
    },
    danger: {
      backgroundColor: 'danger',
      hoverBackgroundColor: 'danger-dark',
      border: 'none',
      color: 'white',
      disabled: {
        color: 'white',
        backgroundColor: 'gray',
      },
    },
    dark: {
      backgroundColor: 'dark',
      hoverBackgroundColor: 'meteorite-gray',
      border: '1px solid var(--light)',
      color: 'white',
      disabled: {
        color: 'gray',
        backgroundColor: 'transparent',
      },
    },
    warning: {
      backgroundColor: 'warning',
      hoverBackgroundColor: 'warning-dark',
      border: 'none',
      color: 'dark',
      disabled: {
        color: 'white',
        backgroundColor: 'gray',
      },
    },
  },
  outline: {
    primary: {
      backgroundColor: 'transparent',
      hoverBackgroundColor: 'primary-light',
      border: '1px solid var(--gray-border)',
      color: 'primary',
      disabled: {
        color: 'gray',
        backgroundColor: 'transparent',
      },
    },
    dark: {
      backgroundColor: 'dark',
      hoverBackgroundColor: 'meteorite-gray',
      border: '1px solid var(--light)',
      color: 'white',
      disabled: {
        color: 'gray',
        backgroundColor: 'transparent',
      },
    },
    danger: {
      backgroundColor: 'transparent',
      hoverBackgroundColor: 'danger-light',
      border: '1px solid var(--gray-border)',
      color: 'danger',
      disabled: {
        color: 'gray',
        backgroundColor: 'transparent',
      },
    },
    warning: {
      backgroundColor: 'transparent',
      hoverBackgroundColor: 'warning-light',
      border: '1px solid var(--gray-border)',
      color: 'warning',
      disabled: {
        color: 'gray',
        backgroundColor: 'transparent',
      },
    },
  },
  text: {
    primary: {
      backgroundColor: 'transparent',
      hoverBackgroundColor: 'primary-light',
      border: 'none',
      color: 'primary',
      disabled: {
        color: 'gray',
        backgroundColor: 'transparent',
      },
    },
    danger: {
      backgroundColor: 'transparent',
      hoverBackgroundColor: 'danger-light',
      border: 'none',
      color: 'danger',
      disabled: {
        color: 'gray',
        backgroundColor: 'transparent',
      },
    },
    dark: {
      backgroundColor: 'dark',
      hoverBackgroundColor: 'meteorite-gray',
      border: '1px solid var(--light)',
      color: 'white',
      disabled: {
        color: 'gray',
        backgroundColor: 'transparent',
      },
    },
    warning: {
      backgroundColor: 'transparent',
      hoverBackgroundColor: 'warning-light',
      border: 'none',
      color: 'warning',
      disabled: {
        color: 'gray',
        backgroundColor: 'transparent',
      },
    },
  },
};

```