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

Hostinger Tools, version 3.0.39. 77 lines.

- Page: https://pluginprobe.com/plugins/hostinger/3.0.39/code/vue-frontend/src/components/OverheadButton.vue
- Raw: https://pluginprobe.com/plugins/hostinger/3.0.39/raw/vue-frontend/src/components/OverheadButton.vue
- Modified: 2025-03-03T08:32:52+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.39/code/vue-frontend/src/components/OverheadButton.vue#L10-L20`.

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

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

type Emits = {
  click: [];
};

const emit = defineEmits<Emits>();
const props = defineProps<Props>();
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>

```