# hostinger/3.0.78/vue-frontend/src/components/OverheadButton.vue

Hostinger Tools, version 3.0.78. 85 lines.

- Page: https://pluginprobe.com/plugins/hostinger/3.0.78/code/vue-frontend/src/components/OverheadButton.vue
- Raw: https://pluginprobe.com/plugins/hostinger/3.0.78/raw/vue-frontend/src/components/OverheadButton.vue
- 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/OverheadButton.vue#L10-L20`.

```vue
<script setup lang="ts">
import { computed } from "vue";
import { type RouteLocationNamedRaw, useRouter } from "vue-router";

type Props = {
	text: string;
	route?: RouteLocationNamedRaw;
	to?: string;
	action?: () => void;
};

type Emits = {
	click: [];
};

const props = defineProps<Props>();
const emit = defineEmits<Emits>();
const router = useRouter();

const buttonText = computed(() => props?.text || "");

const onButtonClick = () => {
	emit("click");
	(props?.action || redirectToRoute)();
};

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

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

	return "button";
});

const redirectToRoute = () => {
	const { name, query } = props?.route || {};

	if (!name) return;

	router.push({
		name,
		query
	});
};
</script>

<template>
  <Teleport
    :key="buttonText"
    to="#overhead-button"
  >
    <component
      :is="tag"
      class="overhead-button text-button-2"
      @click="onButtonClick"
    >
      {{ buttonText }}
    </component>
    <slot />
  </Teleport>
</template>

<style scoped lang="scss">
.overhead-button {
	display: inline-flex;
	padding: 12px 32px;
	align-items: flex-start;
	gap: 12px;
	color: var(--primary);
	border-radius: 8px;
	border: 1px solid var(--gray-border);
	background: var(--light);

	&:hover {
		cursor: pointer;
		transition: 0.3s;
		opacity: 0.7;
	}
}
</style>

```