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

Hostinger Tools, version 3.0.78. 40 lines.

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

```vue
<script setup lang="ts">
import { computed } from "vue";

import { H_LABEL_THEME_CONFIGURATION, HLabelTheme } from "@/types";
import { wrapInCssVar } from "@/utils/helpers";

interface Props {
	theme?: HLabelTheme;
}

const props = withDefaults(defineProps<Props>(), {
	theme: "primary"
});

const configuration = computed(() => H_LABEL_THEME_CONFIGURATION[props.theme]);

const style = computed(() => ({
	backgroundColor: wrapInCssVar(configuration.value.backgroundColor),
	color: wrapInCssVar(configuration.value.color)
}));
</script>

<template>
  <div class="label text-overline">
    <slot />
  </div>
</template>

<style lang="scss" scoped>
.label {
	display: flex;
	padding: 4px 8px;
	align-items: center;
	gap: 10px;
	border-radius: 6px;
	background-color: v-bind("style.backgroundColor");
	color: v-bind("style.color");
}
</style>

```