Tag

Figma

🧪 Beta

Guidelines

🛠 In progress

Web

🔭 Alpha

Mobile

🔭 Alpha

A tag is a small, interactive label that represents a piece of information, category, or attribute associated with an item.

Tags are commonly used for categorization, filtering, and organization of content, allowing users to quickly identify and navigate related items. They are often clickable, enabling users to filter or search for items with the same tag.

Tags enhance the user experience by providing a visual and intuitive way to manage and explore content, making it easier to find relevant information.

Guidelines

Correct / Incorrect

Takeaways

Features

Usage

Implementation

Tag name

<script lang="ts">
  import { Tag, TagType, flag_icon_url } from '@behavy/glowup-design-system';

  let tag: TagType = new TagType({
    id: 1,
    name: 'Tag name',
    icon: flag_icon_url,
    color: 'dark-purple',
    background_color: 'light-purple'
  });
</script>

<Tag {tag} />

Properties

Status	Name	Type	Default	Required	Description
🔭	tag	TagType		✅

Examples

Alternative

No alternative.