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

Hostinger Tools, version 3.0.78. 164 lines.

- Page: https://pluginprobe.com/plugins/hostinger/3.0.78/code/vue-frontend/src/components/Button/configuration.ts
- Raw: https://pluginprobe.com/plugins/hostinger/3.0.78/raw/vue-frontend/src/components/Button/configuration.ts
- Modified: 2025-09-09T07:18:12+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.78/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"
			}
		}
	}
};

```