badge-list

A row of badges that shows the first few and opens the rest from "+N more", by keyboard or tap.

Example

Njuko Webhook site
+3 more Google Sheet Salesforce Mailchimp

Laravel

<x-admin::badge-list id="g-badges" :max="2" :items="['Njuko', 'Webhook site', 'Google Sheet', 'Salesforce', 'Mailchimp']" />

Props

PropRequiredDefaultOptions
items[]
max3
variant"neutral"

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { BadgeList } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<span class="adm-badge-list" id="g-badges">
    <span class="adm-badge adm-badge--neutral">Njuko</span>
<span class="adm-badge adm-badge--neutral">Webhook site</span>
            <details class="adm-badge-list__more">
            <summary class="adm-badge adm-badge--outline">+3 more</summary>
            <span class="adm-badge-list__rest"><span class="adm-badge adm-badge--neutral">Google Sheet</span>
<span class="adm-badge adm-badge--neutral">Salesforce</span>
<span class="adm-badge adm-badge--neutral">Mailchimp</span>
</span>
        </details>
    </span>