Badge

Le composant badge permet d'afficher une pastille sur un élément (éventuellement avec un numéro).

Classes du composant

Modificateurs d'apparence

.badge--primary : Primaire

Modificateurs de positionnement

.badge--b-start : Placer au début de l'axe bloc
.badge--b-end : Placer à la fin de l'axe bloc
.badge--i-start : Placer au début de l'axe en ligne
.badge--i-end : Placer à la fin de l'axe en ligne

Exemples

<kuik:badge priority="primary" blockPosition="start" inlinePosition="end" />
<kuik:badge>99+</kuik:badge>

Priority

Block position

Inline position

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<div>
    <kuik:button type="button" status="accent" priority="primary" size="md">
        Notifications
        <kuik:badge priority="primary" blockPosition="start" inlinePosition="end" content="badge"/>
    </kuik:button>
</div>

<div>
    <kuik:button type="button" status="neutral" priority="tertiary" size="md">
        Boîte de réception
        <kuik:badge content="5" />
    </kuik:button>
</div>

<div>
    <kuik:button type="button" status="neutral" priority="tertiary" size="md">
        Boîte de réception
        <kuik:badge content="99+" />
    </kuik:button>
</div>

<kuik:heading size="lg" skin="a" title="Priority" level="3" />
<div>
    <kuik:button type="button" status="neutral" priority="tertiary" size="md">
        Priority : primary (valeur par défaut)
        <kuik:badge content="5" priority="primary" />
    </kuik:button>
</div>

<kuik:heading size="lg" skin="a" title="Block position" level="3" />
<div>
    <kuik:button type="button" status="neutral" priority="tertiary" size="md">
        Block position : start
        <kuik:badge content="5" blockPosition="start" />
    </kuik:button>
</div>
<div>
    <kuik:button type="button" status="neutral" priority="tertiary" size="md">
        Block position : end
        <kuik:badge content="5" blockPosition="end" />
    </kuik:button>
</div>

<kuik:heading size="lg" skin="a" title="Inline position" level="3" />
<div>
    <kuik:button type="button" status="neutral" priority="tertiary" size="md">
        Inline position : start
        <kuik:badge content="5" inlinePosition="start" />
    </kuik:button>
</div>
<div>
    <kuik:button type="button" status="neutral" priority="tertiary" size="md">
        Inline position : end
        <kuik:badge content="5" inlinePosition="end" />
    </kuik:button>
</div>

Name	Type	Required	Description
content	java.lang.String	false	Contenu du badge
priority	java.lang.String	false	Priorité du badge (Valeur par défaut : primary)
blockPosition	java.lang.String	false	Position bloc du badge
inlinePosition	java.lang.String	false	Position en ligne du badge

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ attribute name="content" type="java.lang.String" description="Contenu du badge" %>
<%@ attribute name="priority" type="java.lang.String" description="Priorité du badge (Valeur par défaut : primary)" %>
<%@ attribute name="blockPosition" type="java.lang.String" description="Position bloc du badge" %>
<%@ attribute name="inlinePosition" type="java.lang.String" description="Position en ligne du badge" %>

<c:if test="${empty pageScope.priority}">
    <c:set var="priority" value="primary" />
</c:if>
<c:set var="classesPriority" value="badge--${pageScope.priority}"/>

<c:if test="${not empty pageScope.blockPosition}">
    <c:set var="classesBlockPosition" value="badge--b-${pageScope.blockPosition}"/>
</c:if>
<c:if test="${not empty pageScope.inlinePosition}">
    <c:set var="classesInlinePosition" value="badge--i-${pageScope.inlinePosition}"/>
</c:if>

<c:set var="classes" value="badge ${pageScope.classesPriority} ${pageScope.classesBlockPosition} ${pageScope.classesInlinePosition}"/>

<c:set var="attributes">
    <c:forEach items="${dynattrs}" var="a">
        <c:choose>
            <c:when test="${a.key == 'class'}">
                <c:set value="${classes} ${a.value}" var="classes"/>
            </c:when>
            <c:otherwise>${a.key}="${a.value}" </c:otherwise>
        </c:choose>
    </c:forEach>
</c:set>

<span class="${pageScope.classes}" ${pageScope.attributes}><c:out value="${pageScope.content}" /></span>

.badge {
  --badge-fill: var(--neutral-30);
  --badge-content: var(--neutral-70);
  --badge-radius: var(--radius-sm);
  --badge-translate-x: 0;
  --badge-translate-y: 0;

  background-color: var(--badge-fill);
  border-radius: var(--badge-radius);
  font-size: var(--font-size-40);
  font-weight: var(--font-weight-700);
  line-height: 100%;
  text-align: center;
  text-transform: uppercase;
  translate: var(--badge-translate-x) var(--badge-translate-y);
}

.badge:empty {
  --badge-fill: var(--badge-content);

  aspect-ratio: 1;
  inline-size: calc(var(--badge-radius) * 2);
}

.badge:not(:empty) {
  padding: var(--space-1) var(--space-2);
}

.badge--primary {
  --badge-content: var(--color1-70);
  --badge-fill: var(--color1-30);
}

.badge--b-start,
.badge--i-start,
.badge--b-end,
.badge--i-end {
  position: absolute;
}

.badge--b-start {
  --badge-translate-y: -50%;

  inset-block-start: var(--space-0);
}

.badge--b-end {
  --badge-translate-y: 50%;

  inset-block-end: var(--space-0);
}

.badge--i-start {
  --badge-translate-x: -50%;

  inset-inline-start: var(--space-0);
}

.badge--i-end {
  --badge-translate-x: 50%;

  inset-inline-end: var(--space-0);
}

*:has(> .badge) {
  position: relative;
}