badge

A short status or category label.

Example

Laravel

<x-admin::toolbar>
    <x-admin::badge>Draft</x-admin::badge>
    <x-admin::badge variant="outline">Archived</x-admin::badge>
    <x-admin::badge variant="primary">New</x-admin::badge>
    <x-admin::badge variant="info" dot>Paused</x-admin::badge>
    <x-admin::badge variant="success" dot>Synced</x-admin::badge>
    <x-admin::badge variant="warning" dot>Degraded</x-admin::badge>
    <x-admin::badge variant="destructive" dot>Failing</x-admin::badge>
</x-admin::toolbar>

Props

PropRequiredDefaultOptions
variant"neutral"neutral, primary, outline, info, success, warning, destructive
dotfalse

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

Other stacks

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

HTML, for any stack
<div class="adm-toolbar" role="toolbar"><span class="adm-badge adm-badge--neutral">Draft</span>
    <span class="adm-badge adm-badge--outline">Archived</span>
    <span class="adm-badge adm-badge--primary">New</span>
    <span class="adm-badge adm-badge--info adm-badge--dot">Paused</span>
    <span class="adm-badge adm-badge--success adm-badge--dot">Synced</span>
    <span class="adm-badge adm-badge--warning adm-badge--dot">Degraded</span>
    <span class="adm-badge adm-badge--destructive adm-badge--dot">Failing</span></div>