Marker

Inline status / note / separator / row

A line between messages that isn't a message — a date, "New", "Megumi joined", a system note. It is a note, not a heading.

Basic

status pill

ℹnote, muted line

separator

⚠border row, danger

shimmer while pending

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

<template>
  <div class="col" style="max-width: 480px">
    <BlessMarker>status pill</BlessMarker>
    <BlessMarker variant="note" color="info"
      ><template #icon>ℹ</template>note, muted line</BlessMarker
    >
    <BlessMarker variant="separator">separator</BlessMarker>
    <BlessMarker variant="border" color="danger"
      ><template #icon>⚠</template>border row, danger</BlessMarker
    >
    <BlessMarker shimmer>shimmer while pending</BlessMarker>
  </div>
</template>

• variant: status (centred tag), note (muted line), separator (labelled rule), border (boxed row). shimmer for pending or streaming states.

Usage

import { BlessMarker } from "blessing-ui";

API

Props

Name	Type	Default	Description
variant	"status" | "separator" | "note" | "border"	"status"	status = centered pill, note = muted line, separator = labelled rule, border = bordered row
color	"text" | "accent" | "danger" | "warning" | "success" | "info"	"text"
shimmer	boolean	—	shimmer (pending / streaming)

Slots

Name	Scope	Description
icon	—
default	—