Primitives

Alert

A message that needs attention. Polite by default: role="alert" makes a screen reader interrupt whatever it was reading, which is right for a message that just appeared and wrong for one that was on the page all along — set urgent only for the former. The tone is a colour and the strength of its wash, read through --aura-alert-color and --aura-alert-tint, so .aura-alert--brand { --aura-alert-color: var(--brand) } is a sixth tone with no fork of the stylesheet.

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

Budget at 80%

Three days left in the cycle.

Build failed

aura-svelte — 2 minutes ago

Tokens rebuilt.

Budget at 80%

Three days left in the cycle.

Build failed

aura-svelte — 2 minutes ago

Tokens rebuilt.

Budget at 80%

Three days left in the cycle.

Build failed

aura-svelte — 2 minutes ago

Tokens rebuilt.

Budget at 80%

Three days left in the cycle.

Build failed

aura-svelte — 2 minutes ago

Tokens rebuilt.

Budget at 80%

Three days left in the cycle.

Build failed

aura-svelte — 2 minutes ago

Tokens rebuilt.

Code

index.html

<div class="aura-stack" style="--aura-dir:column;--aura-gap:var(--space-3)">
  <div role="status" class="aura-alert aura-alert--warning">
    <div class="aura-alert__body"><div class="aura-alert__title">Budget at 80%</div>Three days left in the cycle.</div>
  </div>
  <div role="status" class="aura-alert aura-alert--danger">
    <div class="aura-alert__body"><div class="aura-alert__title">Build failed</div>aura-svelte — 2 minutes ago</div>
  </div>
  <div role="status" class="aura-alert">
    <div class="aura-alert__body">Tokens rebuilt.</div>
  </div>
</div>

Demo.tsx

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

export default function Demo() {
  return (
    <Stack gap={3}>
      <Alert title="Budget at 80%" tone="warning">Three days left in the cycle.</Alert>
      <Alert tone="danger" title="Build failed">aura-svelte — 2 minutes ago</Alert>
      <Alert>Tokens rebuilt.</Alert>
    </Stack>
  );
}

Demo.vue

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

<template>
  <Alert tone="warning" title="Budget at 80%">Three days left in the cycle.</Alert>
</template>

Demo.svelte

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

<Alert tone="warning" title="Budget at 80%">Three days left in the cycle.</Alert>

Used as aura-alert.

demo.component.ts

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

@Component({
  standalone: true,
  imports: [AuraAlert],
  template: `<aura-alert tone="warning" title="Budget at 80%">Three days left in the cycle.</aura-alert>`,
})
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	`BadgeTone`	`'info'`
title	`string`	—
urgent	`boolean`	`false`	Switches `role="status"` to `role="alert"`. Only for a message that appears in response to something.
withCloseButton	`boolean`	`false`
closeLabel	`string`	`'Dismiss'`
onClose	`() => void`	—
icon	`ReactNode`	—

Name	Type	Default
tone	`BadgeTone`	`'info'`
title	`string`	—
urgent	`boolean`	`false`
withCloseButton	`boolean`	`false`
closeLabel	`string`	`'Dismiss'`
closeevent	`() => void`	—
iconslot	`slot`	—

Name	Type	Default
tone	`BadgeTone`	`'info'`
title	`string`	—
urgent	`boolean`	`false`
withCloseButton	`boolean`	`false`
closeLabel	`string`	`'Dismiss'`
onclose	`() => void`	—
iconslot	`Snippet`	—

Name	Type	Default	Notes
tone	`BadgeTone`	`'info'`
title	`string`	—
icon	`TemplateRef<unknown>`	—	React takes a node, Vue a slot and Svelte a snippet; a template is this package’s word for the same thing. Aura ships no icon set, so this is markup, not a name.
urgent	`boolean`	`false`
withCloseButton	`boolean`	`false`
closeLabel	`string`	`'Dismiss'`
closeevent	`EventEmitter<void>`	—

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-alert	base	Required. A modifier does nothing without it.
.aura-alert--<tone>	modifier
.aura-alert__title	element
.aura-alert__body	element

Tokens and rules

components.css

rule: 3px solid var(--aura-alert-color, var(--info))
wash: color-mix(var(--aura-alert-color) var(--aura-alert-tint, 8%))
default tone: info — a note, not a brand moment