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>