Badge

Small label — NEW!, a count, a status word

An upright plate like every other label — it is never attended to, so it never leans. Ink by default: colour means chosen, and a NEW! marker isn't a choice. danger, warning, success and info are for status; badge and accent follow the palette and are for something chosen. Fills carry white text (on-light on warning and success). It marks a thing: new, on sale, paid, episode 12. It is not interactive and never removable — that's Chip — and it doesn't sit on a corner of something else — that's Indicator.

scaled shrinks it to 0.8, the way the source site's NEW! sat beside a nav item; BlessSidebarNav and BlessListItem use it, everything else shouldn't. variant="outline" is the quiet version: border and text in the colour, no fill — for role and category tags that label rather than shout. Warning and success outlines take a muted border: their fills are too pale to draw a line.

Basic

News 04.04 NEW!Story EP.12Shop SALE

<script setup lang="ts">
import { BlessBadge, BlessDash } from "blessing-ui";
</script>

<template>
  <div class="row">
    <span>News <b>04.04</b><BlessDash /><BlessBadge scaled /></span>
    <span>Story<BlessDash color="muted" /><BlessBadge>EP.12</BlessBadge></span>
    <span>Shop<BlessDash /><BlessBadge color="warning">SALE</BlessBadge></span>
  </div>
</template>

Colors

badgeaccentdangerwarningsuccessinfotext

<script setup lang="ts">
import { BlessBadge } from "blessing-ui";
const colors = ["badge", "accent", "danger", "warning", "success", "info", "text"] as const;
</script>

<template>
  <div class="row">
    <BlessBadge v-for="c in colors" :key="c" :color="c">{{ c }}</BlessBadge>
  </div>
</template>

Outline

企画サブディレクターメインヒロイン

textdangerinfoNEW!

<script setup lang="ts">
import { BlessBadge } from "blessing-ui";
</script>

<template>
  <div class="col">
    <div class="row">
      <BlessBadge variant="outline">企画</BlessBadge>
      <BlessBadge variant="outline">サブディレクター</BlessBadge>
      <BlessBadge variant="outline">メインヒロイン</BlessBadge>
    </div>
    <div class="row">
      <BlessBadge variant="outline" color="text">text</BlessBadge>
      <BlessBadge variant="outline" color="danger">danger</BlessBadge>
      <BlessBadge variant="outline" color="info">info</BlessBadge>
      <BlessBadge variant="outline">NEW!</BlessBadge>
    </div>
  </div>
</template>

Usage

import { BlessBadge } from "blessing-ui";

API

Props

Name	Type	Default	Description
color	"text" | "accent" | "danger" | "warning" | "success" | "info" | "badge"	"text"
scaled	boolean	false	shrink to 0.8 — the source's NEW! next to a nav item; off by default
variant	"solid" | "outline"	"solid"	outline: 1px border and text in the colour, no fill — quiet category/role tags

Slots

Name	Scope	Description
default	—