Tag
A small chip for a label, a filter or a model name, with an optional button to remove it.
-
.aparte-tag
On this page
html
<span class="aparte-tag">
<span class="aparte-tag__label">typescript</span>
<button class="aparte-tag__remove" aria-label="Remove typescript"><aparte-icon name="close"></aparte-icon></button>
</span>
<span class="aparte-tag aparte-tag--sm"><span class="aparte-tag__label">draft</span></span>.aparte-tag is a chip: a label in a quiet outline, --sm for a smaller one. A
.aparte-tag__remove button inside it removes it, for a list of filters or of chosen items. The
header uses one for the model’s name, and the question receipt is a tag
with a mark.
Customize
Section titled “Customize”| Variable | Default |
|---|---|
--aparte-tag-font-size | var(--aparte-font-size-sm) |
--aparte-tag-gap | var(--aparte-space-2) |
--aparte-tag-padding | var(--aparte-space-1) var(--aparte-space-3) |
--aparte-tag-radius | var(--aparte-radius-sm) |
--aparte-tag-remove-size | var(--aparte-space-6) |
--aparte-tag-remove-icon-size | var(--aparte-space-5) |
Classes
Section titled “Classes”.aparte-tag · .aparte-tag--sm · .aparte-tag__label · .aparte-tag__remove
Accessibility
Section titled “Accessibility”- The remove button shows only a cross: name it after what it removes (“Remove typescript”).