Primitives

Indicator

A dot on the corner of something — unread, online, needs-attention. The wrapper is only a positioning context, so it does not disturb the layout of what it wraps. With a count inside, the dot grows into a pill rather than clipping the number.

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

<span class="aura-indicator">
  <button type="button" class="aura-btn aura-btn--ghost" aria-label="Notifications">
    <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M8 2a4 4 0 0 0-4 4v3l-1 2h10l-1-2V6a4 4 0 0 0-4-4z" fill="currentColor"></path></svg>
  </button>
  <span class="aura-indicator__dot" role="status" aria-label="3 unread"></span>
</span>
<span class="aura-indicator">
  <button type="button" class="aura-btn aura-btn--ghost" aria-label="Notifications">
    <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M8 2a4 4 0 0 0-4 4v3l-1 2h10l-1-2V6a4 4 0 0 0-4-4z" fill="currentColor"></path></svg>
  </button>
  <span class="aura-indicator__dot aura-indicator__dot--count" role="status" aria-label="11 unread">11</span>
</span>

Demo.tsx

import { Indicator } from '@ilomee/aura-react';

/** Mirrors the `indicator` html snippet in the registry — that snippet is what every stack is
 *  diffed against, so this demo has to be the same markup, not merely a good illustration. */
function Bell() {
  return (
    <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
      <path d="M8 2a4 4 0 0 0-4 4v3l-1 2h10l-1-2V6a4 4 0 0 0-4-4z" fill="currentColor" />
    </svg>
  );
}

export default function Demo() {
  return (
    <>
      <Indicator label="3 unread">
        <button type="button" className="aura-btn aura-btn--ghost" aria-label="Notifications">
          <Bell />
        </button>
      </Indicator>
      <Indicator count={11} label="11 unread">
        <button type="button" className="aura-btn aura-btn--ghost" aria-label="Notifications">
          <Bell />
        </button>
      </Indicator>
    </>
  );
}

Demo.vue

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

<template>
  <Indicator :count="11" label="11 unread">
    <BellIcon />
  </Indicator>
</template>

Demo.svelte

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

<Indicator count={11} label="11 unread">
  <BellIcon />
</Indicator>

Used as aura-indicator.

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraIndicator],
  template: `<aura-indicator [count]="11" label="11 unread">
    <svg>…</svg>
  </aura-indicator>`,
})
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
count	`number`	—	A number in the dot. Absent, the dot stays a dot — `0` is a count, not an absence.
hidden	`boolean`	`false`	Hides the dot without unmounting what it is attached to.
label	`string`	—	Names the dot. Without it the dot is silent — a bare coloured dot means nothing to a screen reader, and `role="status"` with no name announces an empty string.
childrenslot	`ReactNode`	—	What the dot is attached to.

Name	Type	Default
count	`number`	—
hidden	`boolean`	`false`
label	`string`	—
defaultslot	`slot`	—

Name	Type	Default
count	`number`	—
hidden	`boolean`	`false`
label	`string`	—
childrenslot	`Snippet`	—

Name	Type	Default
count	`number`	—
hidden	`boolean`	`false`
label	`string`	—
ng-contentslot	`content`	—

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-indicator	base	Required. A modifier does nothing without it.
.aura-indicator__dot	element
.aura-indicator__dot--count	modifier

Tokens and rules

components.css

size: var(--indicator-size) — min-width matches, so a bare dot stays round
fill: var(--danger)
separation: box-shadow: 0 0 0 2px var(--canvas) — same trick as the avatar ring