UITag

UITag

UITag is a component used for categorizing or marking content with small colorful tags. It’s ideal for displaying status, labels, categories, or any other succinct metadata in a visually distinctive way.

<template>
  <UITag type="primary">Tag Text</UITag>
</template>

Props

• type (‘default’ | ‘primary’ | ‘success’ | ‘warning’ | ‘error’ | ‘info’, default: ‘default’): The style type of the tag
• closable (boolean, default: false): Whether the tag can be closed/removed
• color (string): Custom color for the tag (overrides the type)
• bordered (boolean, default: true): Whether to show a border
• round (boolean, default: false): Whether the tag has rounded corners
• size (‘small’ | ‘medium’ | ‘large’, default: ‘medium’): Size of the tag
• icon (Component): Icon component to display before the tag text
• disabled (boolean, default: false): Whether the tag is disabled

Events

• close (Event): Triggered when the tag is closed via the close button
• click (Event): Triggered when the tag is clicked

Slots

• default: Tag content
• icon: Custom icon content

Usage Examples

1. Basic Tag:

<template>
  <UITag>Default</UITag>
  <UITag type="primary">Primary</UITag>
  <UITag type="success">Success</UITag>
  <UITag type="warning">Warning</UITag>
  <UITag type="error">Error</UITag>
  <UITag type="info">Info</UITag>
</template>

2. Closable Tags:

<template>
  <div>
    <UITag
      v-for="(tag, index) in tags"
      :key="index"
      :closable="true"
      @close="removeTag(index)"
    >
      {{ tag }}
    </UITag>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const tags = ref(['Tag 1', 'Tag 2', 'Tag 3']);

function removeTag(index) {
  tags.value.splice(index, 1);
}
</script>

3. Custom Color Tags:

<template>
  <UITag color="#f50">#f50</UITag>
  <UITag color="#2db7f5">#2db7f5</UITag>
  <UITag color="#87d068">#87d068</UITag>
  <UITag color="#108ee9">#108ee9</UITag>
</template>

4. Tags with Icons:

<template>
  <UITag>
    <template #icon>
      <UIIcon name="user" />
    </template>
    User
  </UITag>

  <UITag type="success">
    <template #icon>
      <UIIcon name="check-circle" />
    </template>
    Verified
  </UITag>
</template>

5. Different Sizes:

<template>
  <UITag size="small">Small</UITag>
  <UITag size="medium">Medium</UITag>
  <UITag size="large">Large</UITag>
</template>

Best Practices

1. Visual Design:

   • Use consistent tag types for similar meanings
   • Limit the number of tags in a single view
   • Choose appropriate colors for proper contrast
   • Consider using bordered tags on colored backgrounds

2. Content Guidelines:

   • Keep tag text concise and clear
   • Use single words or short phrases
   • Ensure tag content is meaningful
   • Consider internationalization

3. Interaction Design:

   • Use closable tags when users need to filter or remove categories
   • Consider clickable tags for filtering or navigation
   • Provide clear feedback on tag interaction
   • Ensure sufficient touch targets for mobile

4. Accessibility:

   • Ensure color is not the only way to convey information
   • Maintain sufficient color contrast
   • Include proper ARIA attributes when tags are interactive
   • Test keyboard navigation for interactive tags