Recipes

CalloutList

Severity feed with built-in loading and empty states. Like every recipe, it renders an empty state rather than throwing when handed missing or malformed data.

rendered by aura-react

Build failed

aura-svelte — 2 minutes ago

Budget at 80%

Three days left in the cycle.

New accent shipped

teal is now available.

Code

Demo.tsx

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

const ITEMS = [
  { id: 'build', tone: 'danger', title: 'Build failed', body: 'aura-svelte — 2 minutes ago' },
  { id: 'budget', tone: 'warning', title: 'Budget at 80%', body: 'Three days left in the cycle.' },
  { id: 'accent', tone: 'info', title: 'New accent shipped', body: 'teal is now available.' },
] as const;

// A feed of severities is a Stack of Alerts. The recipe that used to be here added a wrapper,
// an empty state and three prop names to learn — none of which this needs.
export default function Demo() {
  return (
    <Stack gap={2} style={{ width: '100%' }}>
      {ITEMS.map((item) => (
        <Alert key={item.id} tone={item.tone} title={item.title}>
          {item.body}
        </Alert>
      ))}
    </Stack>
  );
}

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-callout	base	Required. A modifier does nothing without it.
.aura-callout__row	element
.aura-callout__row--<tone>	modifier
.aura-callout__title	element