Status & Töne

Tonrollen & Status

Acht Tonrollen auf bestehenden Atlas-Rollen. Jede Bedeutung hat genau eine Farbe.

• Export abgeschlossensuccess
• Wartet auf Freigabeinfo
• Wird erstelltprogress
• Speicher fast vollwarning
• Upload abgebrochenerror
• Archiviertneutral
• Ausgewähltactive

import { statusToneClasses, toneClasses } from '@rapold/framework-core'

const { chip } = statusToneClasses('warning')
<span className={`rounded-full border px-2 ${chip}`}>Prüfen</span>
<div className={toneClasses('success', 'solid')}>Freigegeben</div>

Badge: Tonrollen, Grössen, Zähler

import { Badge } from '@rapold/framework-core'

<Badge tone="live" pulse>Live</Badge>
<Badge tone="info" size="md" numeric dot>128 hören zu</Badge>
<Badge tone="live" onMedia>Live</Badge>

LiveDot & StatusDot

import { LiveDot, StatusDot } from '@rapold/framework-core'

<LiveDot pulse /> Auf Sendung
<StatusDot tone="success" label="Dienst erreichbar" />

Eyebrow

import { Eyebrow } from '@rapold/framework-core'

<Eyebrow>Quartalsbericht</Eyebrow>
<Eyebrow as="h3" tone="primary">Nächste Schritte</Eyebrow>

Inset

import { Inset } from '@rapold/framework-core'

<Inset>…</Inset>
<Inset as="li" tone="success" padding="sm">Variante A</Inset>

KI-Kennzeichnung

import { AiDisclosureBadge } from '@rapold/framework-core'

<AiDisclosureBadge />
<AiDisclosureBadge compact />
<AiDisclosureBadge onMedia decorative className="absolute right-3 bottom-3" />