Indicator

Indicator — точка 8px, которая помечает подпись или число: непрочитанные новости, счётчик выбранного, состояние строки одной точкой. Смысл задаёт tone, цвет назначает скин.

Статус: experimental · в системе с 2026-08 · интерактивность: none (нет)

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

Отметка непрочитанного или нового рядом с пунктом: «News •».
Счётчики выбранного в панели массовых действий: точка тона перед числом — «● 2 ● 0».
Состояние строки или объекта одной точкой, когда подпись Status избыточна.

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

Состояние нужно назвать словом — это Status: точка без подписи смысл не объясняет.
Точка стоит на самой кнопке — это проп indicator у Button.
Маркер несёт число или текст внутри себя — это Tag.

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

status — состояние сущности со значком и подписью
button — точка-нотификатор на самой кнопке — проп indicator

Тоны

Пять тонов рядом с подписями.

Neutral Info Success Warning Error

<!--
  🟢

  Пять тонов Indicator в ряд, каждый с подписью, которая объясняет смысл точки.
  Цвет назначает активный скин через токены --c-indicator-*.
-->

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

const tones = [
	{ tone: "neutral", text: "Neutral" },
	{ tone: "info", text: "Info" },
	{ tone: "success", text: "Success" },
	{ tone: "warning", text: "Warning" },
	{ tone: "error", text: "Error" },
];
</script>

<div style="display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-s);">
	{#each tones as item (item.tone)}
		<span style="display: inline-flex; align-items: center; gap: var(--sp-1);">
			<Indicator tone={item.tone} />
			{item.text}
		</span>
	{/each}
</div>

В строке

Точка перед счётчиком выбранного и отметка непрочитанного рядом с Tag.

Selected 2 Blocked 0

News

<!--
  🟢

  Indicator в строке: точка тона перед счётчиком выбранного, как в панели
  массовых действий списка, и отметка непрочитанного рядом с Tag «News».
  Точка с label — единственный носитель смысла, поэтому получает имя.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Indicator from "$lib/ui/Indicator.svelte";
import Tag from "$lib/ui/Tag.svelte";
</script>

<div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: var(--fs-s);">
	<span style="display: inline-flex; align-items: center; gap: var(--sp-1);">
		<Indicator tone="info" />
		Selected 2
	</span>
	<span style="display: inline-flex; align-items: center; gap: var(--sp-1);">
		<Indicator tone="error" />
		Blocked 0
	</span>
	<span style="display: inline-flex; align-items: center; gap: var(--sp-1);">
		<Tag>News</Tag>
		<Indicator tone="info" label={t("Непрочитанное")} />
	</span>
</div>