Примитивы

IconButton

Квадратная кнопка только с иконкой. Своего набора иконок у Aura нет — передайте свой SVG содержимым.

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

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

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

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

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

Код

index.html

<div class="aura-group" style="--aura-gap:var(--space-3);">
  <button type="button" class="aura-icon-btn" aria-label="Delete">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
      <path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"></path>
    </svg>
  </button>
  <button type="button" class="aura-icon-btn aura-icon-btn--sm" aria-label="Delete, small">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
      <path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"></path>
    </svg>
  </button>
  <button type="button" class="aura-icon-btn aura-icon-btn--danger" aria-label="Delete permanently">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
      <path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3"></path>
    </svg>
  </button>
</div>

Demo.tsx

import { Group, IconButton } from '@ilomee/aura-react';

// Своего набора иконок у Aura нет — передайте свой SVG.
function TrashIcon() {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      aria-hidden="true"
    >
      <path d="M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3" />
    </svg>
  );
}

export default function Demo() {
  return (
    <Group>
      <IconButton aria-label="Delete">
        <TrashIcon />
      </IconButton>
      <IconButton size="sm" aria-label="Delete, small">
        <TrashIcon />
      </IconButton>
      <IconButton tone="danger" aria-label="Delete permanently">
        <TrashIcon />
      </IconButton>
    </Group>
  );
}

Demo.vue

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

<template>
  <IconButton tone="danger" aria-label="Delete" @click="remove">
    <svg viewBox="0 0 24 24"><!-- ваша иконка --></svg>
  </IconButton>
</template>

Demo.svelte

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

<IconButton tone="danger" aria-label="Delete" onclick={remove}>
  <svg viewBox="0 0 24 24"><!-- ваша иконка --></svg>
</IconButton>

Используется как button[auraIconButton].

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraIconButton],
  template: `
    <button auraIconButton tone="danger" aria-label="Delete" (click)="remove()">
      <svg viewBox="0 0 24 24"><!-- your icon --></svg>
    </button>
  `,
})
export class DemoComponent {}

Пропсы

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

Имя	Тип	По умолчанию	Примечания
size	`'md' \| 'sm'`	`'md'`
tone	`'default' \| 'danger'`	`'default'`
aria-label*	`string`	—	Обязателен на уровне типов: у кнопки с одной иконкой нет текста.
children*слот	`ReactNode`	—	Иконка.

Имя	Тип	По умолчанию	Примечания
size	`'md' \| 'sm'`	`'md'`
tone	`'default' \| 'danger'`	`'default'`
aria-label*	`string`	—	Обязателен на уровне типов: у кнопки с одной иконкой нет текста.
defaultслот	`Slot`	—

Имя	Тип	По умолчанию	Примечания
size	`'md' \| 'sm'`	`'md'`
tone	`'default' \| 'danger'`	`'default'`
aria-label*	`string`	—	Обязателен на уровне типов: у кнопки с одной иконкой нет текста.
childrenслот	`Snippet`	—

Имя	Тип	По умолчанию	Примечания
size	`'md' \| 'sm'`	`'md'`
tone	`'default' \| 'danger'`	`'default'`
aria-label*	`string`	—	Обязателен на уровне типов: у кнопки с одной иконкой нет текста.

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

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

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

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

components.css

размер: 28×28 · literal
размер sm: 22×22 · literal
радиус: var(--r1)
иконка: 16px (sm — 13px)
цвет: var(--text-muted)
hover: var(--surface-2)
danger: var(--danger)