Recipes

StatBadge

Status pill that maps a progress status onto the semantic badge tones.

rendered by aura-react

on track+12%2 days lateneutral

Code

Demo.tsx

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

// StatBadge was a Badge and a table of four statuses. The table is three lines, and keeping it
// where the statuses are named is better than importing a component to hold it.
const TONE = { ok: 'success', ahead: 'info', behind: 'danger', neutral: 'accent' } as const;

export default function Demo() {
  return (
    <Group>
      <Badge tone={TONE.ok}>on track</Badge>
      <Badge tone={TONE.ahead}>+12%</Badge>
      <Badge tone={TONE.behind}>2 days late</Badge>
      <Badge tone={TONE.neutral}>neutral</Badge>
    </Group>
  );
}

This is an example, not a component — no package ships it, and there is nothing to import. It is built from primitives that each of the four packages does ship, so the same composition works in every stack; copy it into your own component and it is yours to change.

Props

No props: the composition takes what you give the primitives inside it. Their props are on their own pages.

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.