Badge

Badge

Thymeleaf source

<sl:badge>New</sl:badge>

Rendered HTML

<span class="badge">New</span>

Variants

The same variants as the button.

Variants

Thymeleaf source

<sl:badge>Default</sl:badge>
<sl:badge variant="secondary">Secondary</sl:badge>
<sl:badge variant="destructive">Destructive</sl:badge>
<sl:badge variant="outline">Outline</sl:badge>
<sl:badge variant="ghost">Ghost</sl:badge>
<sl:badge variant="link">Link</sl:badge>

Rendered HTML

<span class="badge">Default</span>
<span class="badge" data-variant="secondary">Secondary</span>
<span class="badge" data-variant="destructive">Destructive</span>
<span class="badge" data-variant="outline">Outline</span>
<span class="badge" data-variant="ghost">Ghost</span>
<span class="badge" data-variant="link">Link</span>

With an icon

Put an <sl:icon> in the icon-start or icon-end slot. It takes the badge’s colour and a 12 pixel size.

With an icon

Thymeleaf source

<sl:badge variant="secondary">
  <sl:slot name="icon-start"><sl:icon name="badge-check"/></sl:slot>
  Verified
</sl:badge>
<sl:badge variant="outline">
  Details
  <sl:slot name="icon-end"><sl:icon name="arrow-right"/></sl:slot>
</sl:badge>

Rendered HTML

<span class="badge" data-variant="secondary">
  <span class="badge-icon" data-icon="inline-start">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
      <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"></path>
      <path d="m16 9-5.5 5.5L8 12"></path>
    </svg>
  </span>
  Verified
</span>
<span class="badge" data-variant="outline">
  Details
  <span class="badge-icon" data-icon="inline-end">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
      <path d="M5 12h14"></path>
      <path d="m12 5 7 7-7 7"></path>
    </svg>
  </span>
</span>

As a link

as="a" renders an anchor, for a badge that filters a list or opens a detail page. Only a linked badge reacts to hover and shows a focus ring; a plain badge is not interactive, so it does not pretend to be.

As a linkOnly a linked badge changes on hover and takes keyboard focus.

Thymeleaf source

<sl:badge as="a" href="/orders?status=open">Open</sl:badge>
<sl:badge as="a" href="/orders?status=late" variant="destructive">Late</sl:badge>
<sl:badge as="a" href="/orders" variant="outline">
  All orders
  <sl:slot name="icon-end"><sl:icon name="arrow-up-right"/></sl:slot>
</sl:badge>

Rendered HTML

<a class="badge" href="/orders?status=open">Open</a>
<a class="badge" data-variant="destructive" href="/orders?status=late">Late</a>
<a class="badge" data-variant="outline" href="/orders">
  All orders
  <span class="badge-icon" data-icon="inline-end">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
      <path d="M7 7h10v10"></path>
      <path d="M7 17 17 7"></path>
    </svg>
  </span>
</a>

A badge is text, so a screen reader reads it where it stands. When a bare number or a single word would not make sense out of context, write the context into the text, or next to the badge.

Props from expressions

Props from an expression

Thymeleaf source

<sl:badge th:variant="${order.late ? 'destructive' : 'secondary'}"
          th:text="${order.status}">Open</sl:badge>

Rendered HTML

<span class="badge" data-variant="destructive">Late</span>

Everything else passes through

Pass-through attributesAnything that is not a prop lands on the rendered element; class is appended.

Thymeleaf source

<sl:badge variant="outline" class="app-wide" id="order-status" data-testid="status">Shipped</sl:badge>

Rendered HTML

<span class="badge app-wide" data-variant="outline" id="order-status" data-testid="status">Shipped</span>

Attributes

Attribute	Values	Default	Description
`variant`	`default` `secondary` `destructive` `outline` `ghost` `link`	`default`	Visual style of the badge.
`as`	`span` `a`	`span`	Element to render: a `span`, or an anchor (`a`) for a badge that links somewhere. Only a linked badge reacts to hover.

Every prop can also be set from an expression: th:variant="${...}". Any other attribute passes through to the rendered element, and class is appended.