BeeTag

A small label to qualify content: a category, a keyword, a status.

import { BeeTag } from "@thaisrr/beedesign";
import "@thaisrr/beedesign/style.css";

Usage

The label goes in the default slot.

Vue 3TypeScriptAccessibility

<script setup lang="ts">
import { BeeTag } from "@thaisrr/beedesign";
</script>

<template>
  <div class="row">
    <BeeTag>Vue 3</BeeTag>
    <BeeTag>TypeScript</BeeTag>
    <BeeTag>Accessibility</BeeTag>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
</style>

Rounded shape

The rounded prop turns the tag into a pill (--bd-radius-full).

Vue 3TypeScriptAccessibility

<script setup lang="ts">
import { BeeTag } from "@thaisrr/beedesign";
</script>

<template>
  <div class="row">
    <BeeTag rounded>Vue 3</BeeTag>
    <BeeTag rounded>TypeScript</BeeTag>
    <BeeTag rounded>Accessibility</BeeTag>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
</style>

In a card

Writing workshop

Every other Thursday, 6 to 8 pm, at the library.

FictionBeginnersFree

<script setup lang="ts">
import { BeeCard, BeeTag } from "@thaisrr/beedesign";
</script>

<template>
  <BeeCard :elevation="1" class="card">
    <h3 class="title">Writing workshop</h3>
    <p class="text">Every other Thursday, 6 to 8 pm, at the library.</p>
    <div class="tags">
      <BeeTag rounded>Fiction</BeeTag>
      <BeeTag rounded>Beginners</BeeTag>
      <BeeTag rounded>Free</BeeTag>
    </div>
  </BeeCard>
</template>

<style scoped>
.card {
  max-width: 24rem;
}

.title {
  margin: 0;
  font-size: 1.125rem;
}

.text {
  margin: 0.5rem 0 1rem;
  color: var(--bd-color-text-muted);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
</style>

API

Props

Name	Type	Default	Description
rounded	boolean	false	Pill-shaped tag.

Slots

Name	Description
default	Label of the tag.

CSS variables used

--bd-color-primary-light, --bd-color-primary-medium, --bd-color-primary-dark, --bd-font-main, --bd-font-size-sm, --bd-radius-sm, --bd-radius-full, --bd-border-width