Примитивы

Chip

Тег, при желании — удаляемый. Крестик идёт вместе с компонентом; событие удаления во всех четырёх библиотеках называется по-своему.

чистая разметка — библиотеки на странице нет

отрендерил aura-react

отрендерил aura-vue

отрендерил aura-svelte

собрано из классов самого aura-angular

design tokens css a11y small

designtokenscssa11ysmall

design tokens css a11y small

designtokenscssa11ysmall

Код

index.html

<div class="aura-group" style="--aura-gap:var(--space-3);">
  <span class="aura-chip">design
  <button type="button" class="aura-chip__remove" aria-label="Remove design">
    <svg viewBox="0 0 8 8" aria-hidden="true">
      <path d="M1 1l6 6M7 1l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
    </svg>
  </button>
</span>
<span class="aura-chip">tokens
<button type="button" class="aura-chip__remove" aria-label="Remove tokens">
  <svg viewBox="0 0 8 8" aria-hidden="true">
    <path d="M1 1l6 6M7 1l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
  </svg>
</button>
</span>
<span class="aura-chip">css
<button type="button" class="aura-chip__remove" aria-label="Remove css">
  <svg viewBox="0 0 8 8" aria-hidden="true">
    <path d="M1 1l6 6M7 1l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
  </svg>
</button>
</span>
<span class="aura-chip">a11y
<button type="button" class="aura-chip__remove" aria-label="Remove a11y">
  <svg viewBox="0 0 8 8" aria-hidden="true">
    <path d="M1 1l6 6M7 1l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
  </svg>
</button>
</span>
<span class="aura-chip aura-chip--sm">small</span>
</div>

Demo.tsx

import { useState } from 'react';
import { Chip, Group, Typography } from '@ilomee/aura-react';

export default function Demo() {
  const [tags, setTags] = useState(['design', 'tokens', 'css', 'a11y']);

  return (
    <Group>
      {tags.map((tag) => (
        <Chip key={tag} removable removeLabel={`Remove ${tag}`} onRemove={() => setTags((t) => t.filter((x) => x !== tag))}>
          {tag}
        </Chip>
      ))}
      <Chip size="sm">small</Chip>
      {tags.length === 0 && (
        <Typography variant="caption" tone="faint">
          All removed — reload to reset.
        </Typography>
      )}
    </Group>
  );
}

Demo.vue

<script setup lang="ts">
import { Chip } from '@ilomee/aura-vue';
</script>

<template>
  <Chip removable @remove="drop('ai')">ai</Chip>
</template>

Demo.svelte

<script lang="ts">
  import { Chip } from '@ilomee/aura-svelte';
</script>

<Chip removable onremove={() => drop('ai')}>ai</Chip>

Используется как aura-chip.

demo.component.ts

import { AuraChip } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraChip],
  template: `<aura-chip [removable]="true" (remove)="drop('ai')">ai</aura-chip>`,
})
export class DemoComponent {}

Это компонент (<aura-chip>), а не директива — в отличие от большей части Angular-пакета.

Пропсы

У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.

Имя	Тип	По умолчанию	Примечания
size	`'md' \| 'sm'`	`'md'`
removable	`boolean`	`false`
onRemove	`() => void`	—	Срабатывает по кнопке удаления.
removeLabel	`string`	`'Remove'`	Доступная подпись для кнопки удаления.

Имя	Тип	По умолчанию	Примечания
size	`'md' \| 'sm'`	`'md'`
removable	`boolean`	`false`
removeLabel	`string`	`'Remove'`
removeсобытие	`() => void`	—	Эмитится кнопкой удаления.

Имя	Тип	По умолчанию	Примечания
size	`'md' \| 'sm'`	`'md'`
removable	`boolean`	`false`
removeLabel	`string`	`'Remove'`
onremove	`() => void`	—	Проп-колбэк, а не событие.

Имя	Тип	По умолчанию
size	`'md' \| 'sm'`	`'md'`
removable	`boolean`	`false`
removeLabel	`string`	`'Remove'`
removeсобытие	`EventEmitter<void>`	—

Какие классы отдаёт

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

Класс	Роль	Примечания
.aura-chip	база	Обязательный. Без него модификатор не работает.
.aura-chip--sm	модификатор
.aura-chip__remove	элемент

Токены и правила

components.css

паддинг: 7px 12px · literal
радиус: 999px · literal
шрифт: 600 12.5px var(--font)
рамка: 1px solid var(--border)
hover: var(--accent)
кнопка ×: 15×15 · var(--danger) на hover