Primitives

IconButton

Square icon-only control. Aura ships no icon set — bring your own SVG as the child.

plain markup — no library on the page

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

Code

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 ships no icon set — bring your own 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"><!-- your icon --></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"><!-- your icon --></svg>
</IconButton>

Used as 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 {}

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
size	`'md' \| 'sm'`	`'md'`
tone	`'default' \| 'danger'`	`'default'`
aria-label*	`string`	—	Required at the type level — an icon-only control has no text.
children*slot	`ReactNode`	—	The icon.

Name	Type	Default	Notes
size	`'md' \| 'sm'`	`'md'`
tone	`'default' \| 'danger'`	`'default'`
aria-label*	`string`	—	Required at the type level — an icon-only control has no text.
defaultslot	`Slot`	—

Name	Type	Default	Notes
size	`'md' \| 'sm'`	`'md'`
tone	`'default' \| 'danger'`	`'default'`
aria-label*	`string`	—	Required at the type level — an icon-only control has no text.
childrenslot	`Snippet`	—

Name	Type	Default	Notes
size	`'md' \| 'sm'`	`'md'`
tone	`'default' \| 'danger'`	`'default'`
aria-label*	`string`	—	Required at the type level — an icon-only control has no text.

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-icon-btn	base	Required. A modifier does nothing without it.
.aura-icon-btn--sm	modifier
.aura-icon-btn--danger	modifier

Tokens and rules

components.css

size: 28×28 · literal
size sm: 22×22 · literal
radius: var(--r1)
icon: 16px (sm — 13px)
color: var(--text-muted)
hover: var(--surface-2)
danger: var(--danger)