Button

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-4);">
  <div class="aura-group" style="--aura-gap:var(--space-3);">
    <button type="button" class="aura-btn aura-btn--primary">Primary</button>
    <button type="button" class="aura-btn aura-btn--secondary">Secondary</button>
    <button type="button" class="aura-btn aura-btn--ghost">Ghost</button>
    <button type="button" class="aura-btn aura-btn--text">Text</button>
    <button type="button" class="aura-btn aura-btn--primary" disabled>Disabled</button>
    <button type="button" class="aura-btn aura-btn--primary aura-btn--loading" disabled aria-busy="true">Saving</button>
  </div>
  <div class="aura-group" style="--aura-gap:var(--space-3);">
    <button type="button" class="aura-btn aura-btn--primary aura-btn--danger">Delete</button>
    <button type="button" class="aura-btn aura-btn--secondary aura-btn--danger">Delete</button>
    <button type="button" class="aura-btn aura-btn--text aura-btn--danger">Delete</button>
    <button type="button" class="aura-btn aura-btn--primary aura-btn--warning">Archive</button>
    <button type="button" class="aura-btn aura-btn--primary aura-btn--success">Approve</button>
  </div>
</div>

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

/**
 * Два ряда, потому что осей две. В первом меняется `variant` при одном тоне, во втором — `tone`, и
 * один и тот же тон показан в трёх вариантах: это то, чего не скажет таблица пропов, — «Удалить»
 * остаётся одним и тем же красным и когда это главная кнопка, и когда это последнее слово в строке.
 */
export default function Demo() {
  return (
    <Stack gap={4}>
      <Group>
        <Button variant="primary">Primary</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="text">Text</Button>
        <Button variant="primary" disabled>
          Disabled
        </Button>
        <Button variant="primary" loading>
          Saving
        </Button>
      </Group>
      <Group>
        <Button variant="primary" tone="danger">
          Delete
        </Button>
        <Button variant="secondary" tone="danger">
          Delete
        </Button>
        <Button variant="text" tone="danger">
          Delete
        </Button>
        <Button variant="primary" tone="warning">
          Archive
        </Button>
        <Button variant="primary" tone="success">
          Approve
        </Button>
      </Group>
    </Stack>
  );
}

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

<template>
  <Button variant="primary" @click="save">Save</Button>
  <Button variant="ghost">Cancel</Button>
  <Button variant="text" tone="danger" @click="remove">Delete</Button>
</template>

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

<Button variant="primary" onclick={save}>Save</Button>
<Button variant="ghost">Cancel</Button>
<Button variant="text" tone="danger" onclick={remove}>Delete</Button>

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

@Component({
  standalone: true,
  imports: [AuraButton],
  template: `
    <button auraButton variant="primary" (click)="save()">Save</button>
    <button auraButton variant="ghost">Cancel</button>
    <button auraButton variant="text" tone="danger" (click)="remove()">Delete</button>
  `,
})
export class DemoComponent {}