Badge

Un petit compteur ou un marqueur, seul ou épinglé au coin d'autre chose. Il n'est jamais interactif : ce qu'il rapporte appartient à l'élément sur lequel il se pose.

Utilisation

vue

<script setup lang="ts">
import { VBadge } from 'vectis-ui'
</script>

<template>
  <VBadge :count="8" />
</template>

Exemples

Variantes

variant remplit le badge de la couleur (solid, par défaut) ou le teinte et écrit le contenu dans la couleur (soft), pour un compteur qui ne doit pas attirer l'œil. Un point reste toujours plein.

vue

8888

<script setup lang="ts">
import { VBadge } from 'vectis-ui'
</script>

<template>
  <VBadge :count="8" variant="solid" />
  <VBadge :count="8" variant="soft" />
  <VBadge :count="8" variant="solid" tone="danger" />
  <VBadge :count="8" variant="soft" tone="danger" />
</template>

Tons

tone définit la couleur : accent, neutral, success, warning ou danger.

vue

88888

<script setup lang="ts">
import { VBadge } from 'vectis-ui'
</script>

<template>
  <VBadge :count="8" tone="accent" />
  <VBadge :count="8" tone="neutral" />
  <VBadge :count="8" tone="success" />
  <VBadge :count="8" tone="warning" />
  <VBadge :count="8" tone="danger" />
</template>

Couleurs personnalisées

color remplace le ton, donnée en hexadécimal, en nom de couleur CSS ou en oklch().

vue

8888

<script setup lang="ts">
import { VBadge } from 'vectis-ui'
</script>

<template>
  <VBadge :count="8" color="#6d28d9" />
  <VBadge :count="8" color="teal" />
  <VBadge :count="8" color="oklch(0.72 0.19 60)" />
  <VBadge :count="8" color="#facc15" />
</template>

Compteurs

count affiche un nombre. Au-delà de 99, il devient 99+.

vue

34299+

<script setup lang="ts">
import { VBadge } from 'vectis-ui'
</script>

<template>
  <VBadge :count="3" />
  <VBadge :count="42" />
  <VBadge :count="128" />
</template>

Avec une icône

icon prend la place du nombre, et l'emporte sur count quand les deux sont donnés.

vue

<script setup lang="ts">
import { VBadge } from 'vectis-ui'
import { check, close, warning } from 'vectis-ui/icons'
</script>

<template>
  <VBadge :icon="check" tone="success" />
  <VBadge :icon="warning" tone="warning" />
  <VBadge :icon="close" tone="danger" />
</template>

Point

dot dessine 10px de couleur sans rien dedans, en ignorant count et icon.

vue

<script setup lang="ts">
import { VBadge } from 'vectis-ui'
</script>

<template>
  <VBadge dot />
  <VBadge dot tone="success" />
  <VBadge dot tone="danger" />
</template>

En ligne

Le slot par défaut fournit un élément cible, à côté duquel le badge est posé.

vue

MessagesDeployment

<script setup lang="ts">
import { VBadge } from 'vectis-ui'
</script>

<template>
  <VBadge :count="4">Messages</VBadge>
  <VBadge dot tone="success">Deployment</VBadge>
</template>

En incrustation

overlay épingle le badge dans un coin de la cible au lieu de le poser à côté.

vue

<script setup lang="ts">
import { VAvatar, VBadge, VIconButton } from 'vectis-ui'
import { notifications } from 'vectis-ui/icons'
</script>

<template>
  <VBadge :count="12" overlay>
    <VIconButton label="Notifications" :icon="notifications" variant="ghost" tone="neutral" />
  </VBadge>

  <VBadge dot tone="success" overlay>
    <VAvatar name="Ada Lovelace" />
  </VBadge>
</template>

Position de l'incrustation

overlayPosition fait passer le coin de l'incrustation du haut vers le bas. Le côté horizontal suit le sens de lecture.

vue

<script setup lang="ts">
import { VAvatar, VBadge } from 'vectis-ui'
</script>

<template>
  <VBadge :count="7" overlay>
    <VAvatar name="Ada Lovelace" size="lg" />
  </VBadge>

  <VBadge dot tone="success" overlay overlay-position="bottom">
    <VAvatar name="Grace Hopper" size="lg" />
  </VBadge>
</template>

Avec anneau

bordered dessine un anneau de 2px autour du badge, et ringColor définit sa couleur pour l'accorder à la surface derrière.

vue

<script setup lang="ts">
import { VAvatar, VBadge } from 'vectis-ui'
</script>

<template>
  <div class="tile">
    <VBadge :count="3" overlay bordered ring-color="var(--vectis-color-surface-raised)">
      <VAvatar name="Ada Lovelace" />
    </VBadge>
  </div>

  <div class="tile tile-accent">
    <VBadge :count="3" tone="danger" overlay bordered ring-color="var(--vectis-color-accent)">
      <VAvatar name="Grace Hopper" />
    </VBadge>
  </div>
</template>

<style scoped>
.tile {
  display: flex;
  padding: var(--vectis-space-4);
  border-radius: var(--vectis-radius-surface);
  background: var(--vectis-color-surface-raised);
}
.tile-accent {
  background: var(--vectis-color-accent);
}
</style>

API

Props

Prop	Type	Défaut
`variant`	`BadgeVariant'solid' \| 'soft'`	`'solid'`
L'intensité avec laquelle le badge est peint : rempli de la couleur, ou un fond teinté avec le contenu dans la couleur, pour un compteur qui ne doit pas attirer l'œil. Un point reste toujours plein, un disque pâle sans contenu se distinguant mal de la page.
`tone`	`BadgeTone'neutral' \| 'accent' \| 'danger' \| 'success' \| 'warning'`	`'accent'`
Ce que le badge signifie, exprimé en couleur. Un badge plein en est rempli et son texte s'adapte pour rester lisible ; un badge teinté en prend la teinte et y écrit son texte.
`color`	`string`	aucune
Une couleur à vous, en hexadécimal, en nom CSS ou en `oklch()`, qui remplace le ton. Sur un badge plein, là où `contrast-color()` est pris en charge, le texte passe au noir ou au blanc de lui-même ; ailleurs il retombe sur le blanc, donc avec une couleur claire le contraste reste à votre charge. Un badge teinté mélange son fond et son texte à partir de cette couleur et du thème.
`count`	`number`	aucune
Le nombre à afficher. Au-delà de 99, il devient 99+, pour qu'un compteur chargé ne puisse pas étirer la pastille indéfiniment.
`icon`	`IconSource`	aucune
Une icône unique affichée à la place d'un nombre. Elle l'emporte sur `count`, et elle est ignorée quand le badge est un point.
`dot`	`boolean`	`false`
Réduit le badge à un point de 10px sans contenu, la façon discrète de signaler qu'il y a du nouveau sans dire combien.
`overlay`	`boolean`	`false`
Épingle le badge à un coin de l'élément cible au lieu de le placer à côté. Sans cible, cette prop ne fait rien.
`overlayPosition`	`BadgeOverlayPosition'top' \| 'bottom'`	`'top'`
À quel coin un badge épinglé se fixe : celui du haut par défaut, celui du bas pour un marqueur qui appartient au pied de sa cible, comme un point de présence sous un avatar. Le côté horizontal suit le sens de lecture et n'est pas configurable.
`bordered`	`boolean`	`false`
Dessine un anneau de 2px dans la couleur de la surface derrière le badge, ce qui le détache d'une cible chargée comme une photo. Cette couleur vaut par défaut le fond de la page, et `ringColor` est ce qui permet d'en changer.
`ringColor`	`string`	aucune
La couleur de l'anneau dessiné par `bordered`. Elle vaut par défaut le fond de la page : un badge posé sur une carte ou un bandeau coloré doit donc recevoir la couleur de cette surface. Sans `bordered`, elle ne fait rien.

Slots

Slot	Type
`default`	`{}`
L'élément auquel le badge appartient. Sans lui, le badge existe seul ; avec lui, le badge est placé à côté de l'élément, ou dans son coin avec `overlay`, et il est masqué aux technologies d'assistance : dites le nombre dans le nom de l'élément lui-même.

Types

Les types que les tables ci-dessus nomment, écrits comme la librairie les déclare. Ceux qui portent export s'importent depuis vectis-ui pour typer votre propre code ; les autres décrivent la forme de ce qu'un slot fournit.

export interface BuiltinIcon {
  name: string
  paths: readonly [string] | readonly [string, string]
}

export type IconRender =
  | { path: string; viewBox?: string }
  | { component: Component; props?: Record<string, unknown> }
  | { src: string }
  | { text: string; class?: string }
  | { class: string }

export type IconSource = string | BuiltinIcon | IconRender

Variables CSS

Token	Valeur
`--vectis-control-size-badge-h`	`1.25rem`
`--vectis-control-size-badge-dot`	`0.625rem`
`--vectis-control-size-badge-ring`	`2px`