BaseBadge

import BaseBadge from "@wikicasa-dev/components/UIKit/BaseBadge";

Use it to tag something with a short status or category, typically over a property card or next to a title. It is a plain <span>, not clickable; for a selectable chip use BaseButton with a selection variant.

Pick the look with badgeClass (default uikit-badge-w-primary-sm):

badgeClass	Looks like	Typical use
uikit-badge-w-primary-sm	Small blue pill, white 10px text	Counters, "Nuovo".
uikit-badge-w-warning	Yellow, dark text	Highlights such as "Vetrina".
uikit-badge-w-lavender	Lavender, dark text, soft shadow	Neutral info tags.
uikit-badge-w-danger	Red, white text	Negative states ("Bloccato").
uikit-badge-w-dark-primary	Dark blue background	Date/time stamps, labels over photos. Set the text color yourself (white); it sets none.
uikit-badge-outline-tag	Black outline, taller (36px)	Feature tags ("Balcone", "Box auto").
uikit-badge-outline-tag-listing	Black outline on white, 12px text	Compact tags/counters in lists.
badge-gold / badge-silver	Gold / silver gradient	Listing quality tiers (Gold / Silver).
badge-black	Black gradient, white text	"Premium" agencies/listings.
badge-gray	Translucent blurred dark, white text	Tags placed over photos.

#Usage

<script setup lang="ts">
import BaseBadge from "@wikicasa-dev/components/UIKit/BaseBadge";
</script>

<template>
  <div style="position: relative">
    <img src="/mock/bilocale-navigli.jpg" alt="Bilocale ai Navigli" style="width: 100%" />
    <BaseBadge badge-class="uikit-badge-w-warning" style="position: absolute; top: 10px; left: 10px">
      Vetrina
    </BaseBadge>
  </div>

  <BaseBadge badge-class="badge-black">Premium</BaseBadge>
  <BaseBadge badge-class="uikit-badge-outline-tag">Terrazzo</BaseBadge>
  <BaseBadge badge-class="uikit-badge-w-dark-primary" style="color: #fff">12/03/2026 - 10:30</BaseBadge>
</template>

#Do / Don't

• Keep the text to one or two words; the badge has a fixed height and does not wrap gracefully.
• Size and spacing tweaks (height, padding, text size) go in your own class/style; the variant classes set them too, so a class may need !important to win (inline style always wins).
• Don't make it interactive (no click handlers as the only action): it is not focusable and has no role.

#Styling hooks

--badge-text-color sets the text color of badge-gold, badge-silver, badge-black and badge-gray.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
badgeClass	"uikit-badge-w-primary-sm" | "uikit-badge-w-warning" | "uikit-badge-w-lavender" | "uikit-badge-outline-tag" | "uikit-badge-outline-tag-listing" | "uikit-badge-w-dark-primary" | "uikit-badge-w-danger" | "badge-black" | "badge-gray" | "badge-gold" | "badge-silver"	"uikit-badge-w-primary-sm"

Events

None.

v-model

None.

Slots

Name	Slot props
default

Exposed (template ref)

None.