Badge

component

A short label: a tag, a status, a count.

Preview

Light

Draft

Code

<twig:Badge variant="secondary">Draft</twig:Badge>

Dark

Draft

Code

<twig:Badge variant="secondary">Draft</twig:Badge>

Try it

Change the props; the example is rendered again by the server.

Draft

<twig:Badge variant="secondary">Draft</twig:Badge>

Variants

`variant`

The visual style variant.

Draft

variant="default"

Draft

variant="secondary"

Draft

variant="destructive"

Draft

variant="outline"

Draft

variant="ghost"

Draft

variant="link"

`as`

The HTML tag to render; use a when the badge navigates.

Draft

as="span"

Draft

as="a"

Usage

New News Workshop

Code

<twig:Badge>New</twig:Badge>
<twig:Badge as="a" href="/tags/news" variant="outline">News</twig:Badge>
<twig:Badge color="#7c3aed">Workshop</twig:Badge>

Installation

php bin/console ux:install badge --kit=github.com/parler-haut-interagir-librement/ux-kit

Props

Prop	Type	Default	Description
`variant`	`'default'\|'secondary'\|'destructive'\|'outline'\|'ghost'\|'link'`	`'default'`	The visual style variant.
`as`	`'span'\|'a'`	`'span'`	The HTML tag to render; use `a` when the badge navigates.
`color`	`string\|null`	`null`	A CSS colour replacing the colour of the variant; anything else than a colour is left out.

Files to copy

templates/components/Badge.html.twig

{%- props
    ## 'default'|'secondary'|'destructive'|'outline'|'ghost'|'link' The visual style variant.
    variant = 'default',
    ## 'span'|'a' The HTML tag to render; use `a` when the badge navigates.
    as = 'span',
    ## string|null A CSS colour replacing the colour of the variant; anything else than a colour is left out.
    color = null
-%}
{%- set _tag = as is same as('a') ? 'a' : 'span' -%}
{%- set _variant = {secondary: 'isSecondary', destructive: 'isDanger', outline: 'isOutline', ghost: 'isGhost', link: 'isLink'}[variant] ?? '' -%}
{%- set _color = color is not null and color matches '/^[#%(),.\\w\\s-]+$/' ? color : null -%}
<{{ _tag }} data-slot="badge" data-variant="{{ variant }}"{{ attributes.defaults({class: ('isBadge ' ~ _variant)|trim}|merge(_color is null ? {} : {style: '--phil-badge-color: ' ~ _color})) }}>
{##- The badge label or content. -#}
{%- block content %}{% endblock -%}
</{{ _tag }}>