Ropav

Badge ​

A badge attaches to something: a count on an avatar, a status dot on an icon button. That is what separates it from a Chip, which stands on its own in the flow of the page.

ts
import { Badge, BadgeAnchor, BadgeLabel } from "ropav";

BadgeAnchor wraps the thing being badged and the badge, and it is what placement positions against. Without it the badge has no corner to sit in.

JD5
variant
color
size
placement
template
<BadgeAnchor>
  <Avatar>
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
  <Badge>
    <BadgeLabel>5</BadgeLabel>
  </Badge>
</BadgeAnchor>

A dot ​

A badge with nothing in it is a dot — the same four placements and five colours, with no number to read.

ALAda — Online
GHGrace — Away
KJKatherine — Offline
badge-dot.vue
vue
<script setup lang="ts">
import { Avatar, AvatarFallback, Badge, BadgeAnchor } from "ropav";

const people = [
  { color: "success", initials: "AL", name: "Ada", status: "Online" },
  { color: "warning", initials: "GH", name: "Grace", status: "Away" },
  { color: "default", initials: "KJ", name: "Katherine", status: "Offline" },
] as const;
</script>

<template>
  <div v-for="person in people" :key="person.initials" class="row">
    <BadgeAnchor>
      <Avatar>
        <AvatarFallback>{{ person.initials }}</AvatarFallback>
      </Avatar>
      <Badge :color="person.color" placement="bottom-right" size="sm" />
    </BadgeAnchor>

    <span class="name">{{ person.name }} — {{ person.status }}</span>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: calc(var(--rp-spacing) * 3);
}

.name {
  font-size: var(--rp-text-sm);
  line-height: var(--rp-text-sm--line-height);
}
</style>

Content ​

BadgeLabel carries the badge's text. Text on its own is wrapped for you when the caller is compiled in Vapor mode; writing the label out works either way, which is what the examples here do. Anything that is not plain text — an icon — is left alone and needs the label written out beside it in any case.

Accessibility ​

  • A badge carries no role and no live region. Its text is read in the flow where it sits, and a dot badge says nothing at all.
  • So put the state in text wherever it matters. "Ada — Online" beside the avatar is read; a green dot on its own is not, and neither is a bare 5 without something nearby saying five of what.

API ​

Badge

PropTypeDefaultDescription
color"default" | "accent" | "success" | "warning" | "danger""default"Badge color.
placement"top-right" | "top-left" | "bottom-right" | "bottom-left""top-right"Badge placement.
size"xs" | "sm" | "md" | "lg""md"Badge size.
variant"primary" | "secondary" | "soft""primary"Badge variant.

Slots: default.

BadgeAnchor

Slots: default.

BadgeLabel

Slots: default.