Primitives

Badge

accent is the unmodified base class; the other tones map to the semantic colour tokens. A tone here is not a palette — it is one colour and the strength of its wash, read through --aura-badge-color and --aura-badge-tint. So the set is open at both ends: .aura-badge--warning { --aura-badge-tint: 22% } restyles a built-in tone without touching the alerts and toasts that share --warning, and a class of your own naming those two properties is a sixth tone, with no fork of the stylesheet and no prop of ours to add.

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

accent success warning danger info brand sm

accentsuccesswarningdangerinfobrandsm

accentsuccesswarningdangerinfo brand sm

accentsuccesswarningdangerinfobrandsm

Code

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;

// The five tones are the ones the stylesheet ships. A sixth is two custom properties — the
// colour and how strong its wash is — so it needs no fork of the stylesheet and no prop of ours.
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>

Used as [auraBadge] — a directive you put on your own element.

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraBadge],
  template: `<span auraBadge tone="success">shipped</span>`,
})
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
tone	`'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'accent'`
size	`'md' \| 'sm'`	`'md'`	Two steps, as on `Chip`. The smaller one is for a badge inside a row of something else — beside a list item’s title, in a table cell — where the default’s 11px sits level with the 13-14px text around it and reads as a second heading rather than as a label on the first.
…HTMLAttributesattrs	`HTMLAttributes<HTMLSpanElement>`	—

Name	Type	Default	Notes
tone	`'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'accent'`
size	`'md' \| 'sm'`	`'md'`	Two steps, as on `Chip`. The smaller one is for a badge inside a row of something else — beside a list item’s title, in a table cell — where the default’s 11px sits level with the 13-14px text around it and reads as a second heading rather than as a label on the first.
defaultslot	`Slot`	—

Name	Type	Default	Notes
tone	`'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'accent'`
size	`'md' \| 'sm'`	`'md'`	Two steps, as on `Chip`. The smaller one is for a badge inside a row of something else — beside a list item’s title, in a table cell — where the default’s 11px sits level with the 13-14px text around it and reads as a second heading rather than as a label on the first.
childrenslot	`Snippet`	—

Name	Type	Default	Notes
tone	`'accent' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'accent'`
size	`'md' \| 'sm'`	`'md'`	Two steps, as on `Chip`. The smaller one is for a badge inside a row of something else — beside a list item’s title, in a table cell — where the default’s 11px sits level with the 13-14px text around it and reads as a second heading rather than as a label on the first.

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-badge	base	Required. A modifier does nothing without it.
.aura-badge--success	modifier
.aura-badge--warning	modifier
.aura-badge--danger	modifier
.aura-badge--info	modifier
.aura-badge--sm	modifier

Tokens and rules

components.css

padding: 3px 9px · literal
radius: 999px · literal
font: 700 11px var(--font) · sm 10px
sm padding: 2px 7px · literal
colour: var(--aura-badge-color, var(--accent))
wash: var(--aura-badge-tint, 14%) — warning at 16%
tones: var(--success) · var(--warning) · var(--danger) · var(--info)