Badge

A compact label for status, counts, or categorization. Badges are pill-shaped by default and come in seven semantic intents.

Live Sandbox

This is a hydrated playground for the component. Toggle "Live preview" on the block below to swap the static HTML render for a real Livewire instance — every prop in the component's sandbox schema becomes an editable form field inside the iframe, so you can try different prop combinations live without writing any local code.

<x-wirekit::badge intent="primary">Beta</x-wirekit::badge>

Basic Usage

<x-wirekit::row gap="xs" :wrap="true">
    <x-wirekit::badge intent="primary">Primary</x-wirekit::badge>
    <x-wirekit::badge intent="accent">Accent</x-wirekit::badge>
    <x-wirekit::badge intent="success">Success</x-wirekit::badge>
    <x-wirekit::badge intent="warning">Warning</x-wirekit::badge>
    <x-wirekit::badge intent="danger">Danger</x-wirekit::badge>
    <x-wirekit::badge intent="info">Info</x-wirekit::badge>
    <x-wirekit::badge intent="neutral">Neutral</x-wirekit::badge>
</x-wirekit::row>

Sizes

<x-wirekit::badge size="sm">Small</x-wirekit::badge>
<x-wirekit::badge size="md">Medium</x-wirekit::badge>
<x-wirekit::badge size="lg">Large</x-wirekit::badge>

Surfaces

The surface prop changes how the intent color is applied. soft (default) is the tinted chip; solid fills with the intent color and uses an on-color foreground; outline is transparent with an intent-colored ring. All three read the same semantic intent tokens, so they restyle automatically under any theme.

<x-wirekit::badge intent="primary" surface="soft">Beta</x-wirekit::badge>
<x-wirekit::badge intent="success" surface="soft">Beta</x-wirekit::badge>
<x-wirekit::badge intent="warning" surface="soft">Beta</x-wirekit::badge>
<x-wirekit::badge intent="danger" surface="soft">Beta</x-wirekit::badge>
<x-wirekit::badge intent="neutral" surface="soft">Beta</x-wirekit::badge>

<x-wirekit::badge intent="primary" surface="solid">Beta</x-wirekit::badge>
<x-wirekit::badge intent="success" surface="solid">Beta</x-wirekit::badge>
<x-wirekit::badge intent="warning" surface="solid">Beta</x-wirekit::badge>
<x-wirekit::badge intent="danger" surface="solid">Beta</x-wirekit::badge>
<x-wirekit::badge intent="neutral" surface="solid">Beta</x-wirekit::badge>

<x-wirekit::badge intent="primary" surface="outline">Beta</x-wirekit::badge>
<x-wirekit::badge intent="success" surface="outline">Beta</x-wirekit::badge>
<x-wirekit::badge intent="warning" surface="outline">Beta</x-wirekit::badge>
<x-wirekit::badge intent="danger" surface="outline">Beta</x-wirekit::badge>
<x-wirekit::badge intent="neutral" surface="outline">Beta</x-wirekit::badge>

A neutral badge on the soft surface fills with the text color mixed into the surface it stands on, as a neutral button does: light on the page and on a card, darker on a card footer, a muted area, a striped or selected row of a table or a data table and an entry of a menu under the pointer, and lighter in a dark panel, so it does not vanish into the surface around it. A gray area of your own follows the same way, as A gray surface of your own shows.

With Dot Indicator

Use the dot prop to add a small colored dot to the left of the label. Useful for status indicators.

<x-wirekit::badge :dot="true" intent="success">Online</x-wirekit::badge>
<x-wirekit::badge :dot="true" intent="warning">Away</x-wirekit::badge>
<x-wirekit::badge :dot="true" intent="danger">Offline</x-wirekit::badge>
<x-wirekit::badge :dot="true" intent="neutral">Idle</x-wirekit::badge>

With Icons

Badges accept any content, including icons:

<x-wirekit::badge intent="success">
    <x-wirekit::icon name="check" size="xs" />
    Verified
</x-wirekit::badge>
<x-wirekit::badge intent="warning">
    <x-wirekit::icon name="warning" size="xs" />
    Pending
</x-wirekit::badge>
<x-wirekit::badge intent="danger">
    <x-wirekit::icon name="close" size="xs" />
    Rejected
</x-wirekit::badge>
<x-wirekit::badge intent="info">
    <x-wirekit::icon name="info" size="xs" />
    Info
</x-wirekit::badge>

Width & Layout

Badges are inline elements that auto-size to their text content. They naturally flow within text or alongside other elements. By default a badge is a single-line, fixed-height pill — its text never wraps.

Multi-line labels

For a long label in a narrow space (a taxonomy chip in a table cell), set wrap. In wrap mode the badge swaps its fixed height for a minimum height plus vertical padding, so the pill grows with the wrapped text instead of the second line spilling below the surface. Without wrap, forcing white-space: normal alone leaves the extra lines outside the pill.

<x-wirekit::badge intent="info" wrap style="max-width: 12rem">Religious founders &amp; spiritual teachers</x-wirekit::badge>

Tooltip & Leading Icon

tooltip surfaces a supplementary explanation through WireKit's own Tooltip component — it appears on hover, focus, touch, and keyboard, and is announced to screen readers via aria-describedby (the badge label stays the accessible name). leadingIcon renders a decorative status glyph before the label. Every badge also carries a subtle depth shadow so it reads less flat.

<x-wirekit::row gap="sm" wrap>
    <x-wirekit::badge intent="success" leading-icon="check" tooltip="Deployed to production">Live</x-wirekit::badge>
    <x-wirekit::badge intent="warning" leading-icon="clock" tooltip="Awaiting review">Pending</x-wirekit::badge>
    <x-wirekit::badge intent="danger" leading-icon="x-circle" tooltip="Build failed">Failed</x-wirekit::badge>
</x-wirekit::row>

Trailing Icon & Dismissible

trailingIcon mirrors leadingIcon but renders after the label (handy for a link arrow). dismissible adds a keyboard-operable close button that removes the badge and dispatches a wirekit:badge-dismissed event — useful for removable filter chips. The button is named after the badge it removes, "Remove Design" for a badge that reads Design, so a row of chips does not read as a row of buttons called "Remove". Override the name with dismissLabel.

<x-wirekit::row gap="sm" wrap>
    <x-wirekit::badge intent="info" trailing-icon="arrow-right">Read more</x-wirekit::badge>
    <x-wirekit::badge intent="primary" surface="outline" dismissible dismiss-label="Remove Design filter">Design</x-wirekit::badge>
    <x-wirekit::badge intent="neutral" dismissible dismiss-label="Remove Engineering filter">Engineering</x-wirekit::badge>
</x-wirekit::row>

Props

Accessibility

• Badges render as <span> elements — inline by default
• The dot indicator has aria-hidden="true" (decorative — its color is the only signal, which is already expressed via the text intent)
• For status badges that convey meaning beyond their color, ensure the text label describes the state clearly (e.g. "Online", "Error", "Expired")

Keyboard Interaction

With dismissible, the badge renders a real <button>: it takes Tab focus, shows the focus ring, and Enter / Space dismiss it. The focus then moves to the next control, which in a row of dismissible badges is the next badge's close button. Without it there is no interactive element and nothing to focus.

Pitfalls

• Don't put interactive content inside a badge. Badges are inline <span> elements — for clickable status pills wrap them with a <x-wirekit::link> or use <x-wirekit::button size="sm" intent="..." />.

Design Tokens

Badges use tinted backgrounds via CSS color-mix() for a subtle, theme-aware look. All colors derive from semantic tokens:

All intents automatically adapt to light/dark mode via the underlying tokens.

Customization

Override defaults without publishing views via config/wirekit.php:

'components' => [
    'badge' => ['intent' => 'primary', 'size' => 'lg'],
],

Or merge custom classes inline:

<x-wirekit::badge class="uppercase tracking-wider">Beta</x-wirekit::badge>

Usage & Conventions

Prop conventions — this component uses one or more of the shared semantic prop names (intent / variant / tone / surface). See Prop naming conventions for the canonical vocabulary, alias matrix, and decision tree.

Further Reading

• MDN: aria-label — for icon-only badges
• MDN: Semantic colors in design systems