<span class="n7-chip has-btn-close">
label
<button class="n7-chip__close">
<svg class="n7-icon inline-block align-middle fill-current w-5 h-5" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--x-mark" />
</svg>
<span class="sr-only">Rimuovi label</span>
</button>
</span>
<{% if href %}a href="{{ href }}"{% else %}span{% endif %} class="n7-chip {% if href %} n7-chip--interactive{% endif %} {% if hasBtnClose %} has-btn-close{% endif %}{% block classes %}{% if classes %} {{ classes }}{%- endif -%}{% endblock %}">
{%- block icon -%}
{% if icon %}
{% render '@icon--small', { id: icon, classes: 'mr-1' }, true %}
{% endif %}
{%- endblock -%}
{%- block content -%}
{% if srLabel %}
<span class="sr-only">{% if srLabel %}{{ srLabel }}{% endif %}</span>
{% endif %}
{% if label %}{{ label }}{% else %}label{% endif %}
{%- endblock -%}
{%- block close -%}
{% if hasBtnClose %}
<button class="n7-chip__close">
{% render '@icon--small', { id: 'mini--x-mark', size: 'w-5 h-5' }, true %}
<span class="sr-only">Rimuovi {{ label }}</span>
</button>
{% endif %}
{%- endblock -%}
</{% if href %}a{% else %}span{% endif %}>
{
"label": "label"
}
/**
* CHIP
*
*/
@layer components {
.n7-chip {
@apply inline-flex px-4 py-1 items-center border rounded-2xl n7-background-02;
}
.n7-chip--sm {
@apply px-2 py-0.5 rounded-xl text-sm;
}
.rtds-chip--lg {
@apply px-4 py-2 rounded-3xl text-sm;
}
/* Chip link - interactive */
.n7-chip--interactive {
@apply n7-border-primary n7-content-primary bg-transparent hover:n7-background-primary-light focus:bg-white focus:n7-border-gray-01 active:n7-background-primary-light active:n7-border-primary;
}
/* CHIP FILTER */
.n7-chip.has-btn-close {
@apply inline-flex items-center justify-center gap-1 relative;
}
.rtds-chip--filter {
@apply gap-2 n7-background-06 text-white;
}
.n7-chip__close {
@apply inline-flex items-center justify-center rounded-full hover:n7-background-02 hover:n7-content-01 focus:n7-background-02 focus:n7-content-01 active:n7-background-02 active:n7-content-01 transition-all;
}
.n7-chip__close {
@apply after:content-[''] after:block after:right-0 after:w-8 after:h-8 after:absolute;
}
/* CHIP STATUS */
/* .n7-chip--status.is-open {
@apply bg-bando-aperto border-bando-aperto text-black;
}
.n7-chip--status.is-in-progress {
@apply bg-bando-in-attivazione border-bando-in-attivazione text-black;
}
.n7-chip--status.is-closed {
@apply bg-archiviato border-archiviato text-white;
} */
}
Chip component and its variants.
Chip can have a screen reader label (sr-only, in the example), depend on the context, if there’s an explicit textual label presenting the chip it can be omitted.
It’s available in 3 size: sm, default (no class is needed), lg.
Blocks: