Badge

composant

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

Aperçu

Clair

Draft

Code

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

Sombre

Draft

Code

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

Essayer

Changez les propriétés ; le serveur rend l’exemple de nouveau.

Draft

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

Variantes

`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

Propriétés

Propriété	Type	Par défaut	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.

Fichiers à copier

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 }}>