CSS: badge ​

.instui-badge — Un petit point de statut ou compteur placé sur le coin d'une cible.

Pour placer un badge au‑dessus d'une cible, envelopper les deux dans un .instui-badge-wrapper (l'ancre de position) et fixer le badge avec le modificateur -placement-*.

Source: badge.css

Utilisation ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/badge.css";

Démo ​

Exemples ​

html
<span class="instui-badge-wrapper">
  <button class="instui-button">Inbox</button>
  <span class="instui-badge -placement-top-end">4</span>
</span>

Structure ​

Le badge s'affiche en ligne de façon autonome, ou à l'intérieur d'un instui-badge-wrapper optionnel qui l'ancre au‑dessus d'une cible.

text
.instui-badge-wrapper (0..1)
  ‹content›
  .instui-badge
flowchart TD n0[".instui-badge-wrapper (0..1)"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n2(".instui-badge"):::cssdoc-part n0 --> n1 n0 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modificateurs ​

ModificateurDescription
.-color-dangerUn compteur d'attention/erreurs.
.-color-inverseOn-dark: a light chip with dark text.
.-color-successUn compteur positif/terminé.
.-placement-bottom-endPosition au coin inférieur de l'extrémité.
.-placement-bottom-startPosition au coin inférieur du début.
.-placement-end-centerPosition centrée sur le bord d'extrémité.
.-placement-start-centerPosition centrée sur le bord de début.
.-placement-top-endPosition au coin supérieur de l'extrémité.
.-placement-top-startPosition au coin supérieur du début.
.-pulseUn anneau d'attention pulsant.
.-standaloneRendu en ligne, non positionné sur le coin d'une cible.
.-type-notificationUn simple point, sans compteur.

Pseudo-éléments ​

Pseudo-élémentDescription
::beforeL'anneau d'attention pulsant dessiné dans la couleur d'accent du badge (variante -pulse).

Propriétés personnalisées ​

PropriétéTypePar défautDescription
--pantoken-badge-accent<color>—Le remplissage de la puce ; chaque variante -color-* et l'anneau pulsant en tirent leur couleur.
--pantoken-badge-text<color>—La couleur du texte, assortie à l'accent pour rester lisible.

Animations ​

AnimationDescription
pantoken-badge-pulseL'animation de l'anneau pulsant.

Tokens consommés ​

TokenTypeValeur
--instui-border-width-md<length>0.125rem
--instui-component-badge-border-radius<length>999rem
--instui-component-badge-color<color>#ffffff
--instui-component-badge-color-danger<color>#E62429
--instui-component-badge-color-inverse<color>#273540
--instui-component-badge-color-primary<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-badge-color-success<color>#03893D
--instui-component-badge-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-badge-font-size<length>0.75rem
--instui-component-badge-font-weight<integer>600
--instui-component-badge-padding<length>0.25rem
--instui-component-badge-size<length>1rem
--instui-spacing-space-sm<length>0.5rem

Connexe ​

  • pill — The inline label-chip counterpart.