# hostinger/trunk/vue-frontend/src/composables/useButton.ts

Hostinger Tools, version trunk. 85 lines.

- Page: https://pluginprobe.com/plugins/hostinger/trunk/code/vue-frontend/src/composables/useButton.ts
- Raw: https://pluginprobe.com/plugins/hostinger/trunk/raw/vue-frontend/src/composables/useButton.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/trunk/code/vue-frontend/src/composables/useButton.ts#L10-L20`.

```typescript
import { computed } from "vue";

import {
	BUTTON_ICON_CONFIGURATION,
	BUTTON_LOADER_DIMENSION_CONFIGURATION,
	BUTTON_SIZE_CONFIGURATION,
	BUTTON_VARIANT_CONFIGURATION
} from "@/components/Button/configuration";
import type { Color, IButtonPropsMandatory } from "@/types";
import { wrapInCssVar } from "@/utils/helpers";

export const useButton = (props: IButtonPropsMandatory) => {
	if (!BUTTON_VARIANT_CONFIGURATION[props.variant][props.color]) {
		throw new Error(
			`Invalid variant and color combination: ${props.variant} ${props.color}`
		);
	}

	const tag = computed(() => {
		if (typeof props.to === "string") {
			return "a";
		}

		if (props.to) {
			return "router-link";
		}

		return "button";
	});

	const configuration = computed(
		() => BUTTON_VARIANT_CONFIGURATION[props.variant][props.color]
	);

	const iconConfiguration = computed(() => {
		const color = props.isDisabled
			? configuration.value.disabled.color
			: configuration.value.color;

		return {
			size: BUTTON_ICON_CONFIGURATION[props.size].size,
			color
		};
	});

	const getColorConfiguration = () => wrapInCssVar(configuration.value.color);

	const getBackgroundConfiguration = () =>
		wrapInCssVar(configuration.value.backgroundColor);

	const getLoaderBorderColor = (): Color | undefined => {
		if (props.variant === "contain") {
			return "white";
		}

		return undefined;
	};

	const style = computed(() => ({
		border: configuration.value.border,
		padding: BUTTON_SIZE_CONFIGURATION[props.size].padding,
		backgroundColor: getBackgroundConfiguration(),
		color: getColorConfiguration(),
		colorDisabled: wrapInCssVar(configuration.value.disabled.color),
		backgroundColorDisabled: wrapInCssVar(
			configuration.value.disabled.backgroundColor
		),
		backgroundHoverColor: wrapInCssVar(
			configuration.value.hoverBackgroundColor
		),
		icon: iconConfiguration.value,
		loader: {
			borderColor: getLoaderBorderColor(),
			size: BUTTON_LOADER_DIMENSION_CONFIGURATION[props.size].size,
			border: BUTTON_LOADER_DIMENSION_CONFIGURATION[props.size].border
		}
	}));

	return {
		style: style.value,
		tag,
		configuration
	};
};

```