Примитивы

Badge

Статусная плашка. accent — это базовый класс без модификатора; остальные тона ложатся на семантические цветовые токены. Тон здесь — не палитра, а один цвет и сила его подложки, читаемые через --aura-badge-color и --aura-badge-tint. Поэтому набор открыт с обеих сторон: .aura-badge--warning { --aura-badge-tint: 22% } меняет встроенный тон, не трогая алерты и тосты, которые делят --warning, а свой класс, задающий эти два свойства, — это шестой тон, без форка стилей и без нового пропа с нашей стороны.

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

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

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

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

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

accent success warning danger info brand sm

accentsuccesswarningdangerinfobrandsm

accentsuccesswarningdangerinfo brand sm

accentsuccesswarningdangerinfobrandsm

Код

index.html

<div class="aura-group" style="--aura-gap:var(--space-3);">
  <span class="aura-badge">accent</span>
  <span class="aura-badge aura-badge--success">success</span>
  <span class="aura-badge aura-badge--warning">warning</span>
  <span class="aura-badge aura-badge--danger">danger</span>
  <span class="aura-badge aura-badge--info">info</span>
  <span class="aura-badge" style="--aura-badge-color: #7c3aed">brand</span>
  <span class="aura-badge aura-badge--danger aura-badge--sm">sm</span>
</div>

Demo.tsx

import type { CSSProperties } from 'react';
import { Badge, Group } from '@ilomee/aura-react';

const TONES = ['accent', 'success', 'warning', 'danger', 'info'] as const;

// Пять тонов — это те, что поставляются со стилями. Шестой — два кастомных свойства: цвет и сила
// его подложки. Ни форка стилей, ни нового пропа с нашей стороны для этого не нужно.
const BRAND = { '--aura-badge-color': '#7c3aed' } as CSSProperties;

export default function Demo() {
  return (
    <Group>
      {TONES.map((tone) => (
        <Badge key={tone} tone={tone}>
          {tone}
        </Badge>
      ))}
      <Badge style={BRAND}>brand</Badge>
      <Badge tone="danger" size="sm">
        sm
      </Badge>
    </Group>
  );
}

Demo.vue

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

<template>
  <Badge tone="success">shipped</Badge>
</template>

Demo.svelte

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

<Badge tone="success">shipped</Badge>

Используется как [auraBadge] — директива, которую вы вешаете на свой элемент.

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraBadge],
  template: `<span auraBadge tone="success">shipped</span>`,
})
export class DemoComponent {}

Пропсы

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

Имя	Тип	По умолчанию	Примечания
tone	`'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'accent'`
size	`'md' \| 'sm'`	`'md'`	Две ступени, как у `Chip`. Меньшая — для плашки внутри строки чего-то другого: рядом с заголовком пункта списка, в ячейке таблицы, — где дефолтные 11px стоят вровень с окружающим текстом в 13-14px и читаются как второй заголовок, а не как метка на первом.
…HTMLAttributesатрибуты	`HTMLAttributes<HTMLSpanElement>`	—

Имя	Тип	По умолчанию	Примечания
tone	`'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'accent'`
size	`'md' \| 'sm'`	`'md'`	Две ступени, как у `Chip`. Меньшая — для плашки внутри строки чего-то другого: рядом с заголовком пункта списка, в ячейке таблицы, — где дефолтные 11px стоят вровень с окружающим текстом в 13-14px и читаются как второй заголовок, а не как метка на первом.
defaultслот	`Slot`	—

Имя	Тип	По умолчанию	Примечания
tone	`'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'accent'`
size	`'md' \| 'sm'`	`'md'`	Две ступени, как у `Chip`. Меньшая — для плашки внутри строки чего-то другого: рядом с заголовком пункта списка, в ячейке таблицы, — где дефолтные 11px стоят вровень с окружающим текстом в 13-14px и читаются как второй заголовок, а не как метка на первом.
childrenслот	`Snippet`	—

Имя	Тип	По умолчанию	Примечания
tone	`'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'accent'`
size	`'md' \| 'sm'`	`'md'`	Две ступени, как у `Chip`. Меньшая — для плашки внутри строки чего-то другого: рядом с заголовком пункта списка, в ячейке таблицы, — где дефолтные 11px стоят вровень с окружающим текстом в 13-14px и читаются как второй заголовок, а не как метка на первом.

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

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

Класс	Роль	Примечания
.aura-badge	база	Обязательный. Без него модификатор не работает.
.aura-badge--success	модификатор
.aura-badge--warning	модификатор
.aura-badge--danger	модификатор
.aura-badge--info	модификатор
.aura-badge--sm	модификатор

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

components.css

паддинг: 3px 9px · literal
радиус: 999px · literal
шрифт: 700 11px var(--font) · sm 10px
паддинг sm: 2px 7px · literal
цвет: var(--aura-badge-color, var(--accent))
подложка: var(--aura-badge-tint, 14%) — warning at 16%
тона: var(--success) · var(--warning) · var(--danger) · var(--info)