OpenCloud Design System

OcTag component ​

Description ​

The OcTag component can display various information in form of a tag.

Examples ​

Default ​

The component provides a default slot that can be filled with the content that should be displayed inside the tag.

html
<oc-tag>Folder</oc-tag>
<oc-tag>File</oc-tag>
<oc-tag>Space</oc-tag>

Sizes ​

These sizes are available: small, medium, large.

html
<oc-tag size="small">Folder</oc-tag>
<oc-tag size="medium">File</oc-tag>
<oc-tag size="large">Space</oc-tag>

Tags can also be a button or a link. This is determined by the type property.

If the type property is set to button, the tag has a handler that will emit a click event. If the type property is set to a or router-link, the tag needs to be provided with a to property.

vue
<template>
  <oc-tag type="button" class="oc-mr-s" @click="onClick">I am a button</oc-tag>
  <oc-tag type="router-link" :to="{ name: 'somePage' }">I am a link</oc-tag>
  <p>Button clicked: {{ buttonClicked }}</p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const buttonClicked = ref(false)

const onClick = () => {
  buttonClicked.value = true
}
</script>

Properties ​

Emits ​

Slots ​