Tag

Tag показывает категорию или выбранное значение. Он может поддерживать выбор или удаление.

Статус: stable · в системе с 2026-06 · интерактивность: conditional (по конфигурации)

Когда использовать

Короткие метки и категории у сущности.
Выбранные значения фильтра — с удалением (clearable).
Кликабельный тег-фильтр — selectable/selected.

Не использовать:

Основное действие экрана.
Состояние сущности со сменой значения.

Альтернативы:

button — действие
status — состояние с поповером смены

Конструктор

Выберите роль, размер и состав метки. В режимах выбора и удаления действия меняют тот же экземпляр, а не декоративную копию.

retention

Размеры

small

medium

large

<script>
import Tag from "$lib/ui/Tag.svelte";
</script>

<Tag size="s">small</Tag>
<Tag>medium</Tag>
<Tag size="l">large</Tag>

С префиксом

metric CPI

Campaign

cohort Retention

<script>
import TagGlyph from "phosphor-svelte/lib/Tag";
import Tag from "$lib/ui/Tag.svelte";
</script>

<Tag>
  CPI
  {#snippet additional()}metric{/snippet}
</Tag>

<Tag>
  Campaign
  {#snippet leading()}<TagGlyph />{/snippet}
</Tag>

<Tag>
  Retention
  {#snippet additional()}cohort{/snippet}
  {#snippet leading()}<TagGlyph />{/snippet}
</Tag>

Удаляемые

retargeting

lookalike

brand

<script>
import Tag from "$lib/ui/Tag.svelte";

let tags = $state(["retargeting", "lookalike", "brand"]);

function removeTag(tag) {
  tags = tags.filter((item) => item !== tag);
}
</script>

{#each tags as tag (tag)}
  <Tag clearable onremove={() => removeTag(tag)}>{tag}</Tag>
{/each}

Выбор

<script>
import Tag from "$lib/ui/Tag.svelte";

let selected = $state("growth");
</script>

<!-- Ряд пресетов легаси (presetTags): метки в строку с переносом, зазор 10 → 8 -->
<div style="display: flex; flex-wrap: wrap; gap: var(--sp-1);">
  {#each ["growth", "retention", "revenue"] as tag}
    <Tag selectable selected={selected === tag} onclick={() => (selected = tag)}>
      {tag}
    </Tag>
  {/each}
</div>

Mark

frozen

id rule

<script>
import Tag from "$lib/ui/Tag.svelte";
</script>

<Tag mark>frozen</Tag>

<Tag mark>
  rule
  {#snippet additional()}id{/snippet}
</Tag>