EmptyHint

ui feedbacklayout

Einheitlicher Leerzustand: zentrierter, gestrichelter Kasten mit gedämpftem Text für leere Listen/Bereiche.

Noch keine Lieder hinzugefügt.

Abhängigkeiten

Beispiele

Leere Liste

<EmptyHint>Noch keine Lieder hinzugefügt.</EmptyHint>

Genutzte Tokens · 5

--border--muted--radius-sm--space-3--text-xs

Quelldateien

components/ui/EmptyHint.tsx tsx

import type { ReactNode } from 'react';
import styles from './EmptyHint.module.css';

/**
 * Einheitlicher Leerzustand-Hinweis für leere Listen-Bereiche (Lieder,
 * Slidegruppen, Mediengruppen …): zentrierter, gestrichelter Kasten mit
 * gedämpftem Text. Eine Stelle = überall identisches Aussehen.
 */
export function EmptyHint({ children }: { children: ReactNode }) {
  return <div className={styles.hint}>{children}</div>;
}

components/ui/EmptyHint.module.css css

.hint {
  padding: var(--space-3);
  color: var(--muted);
  font-size: var(--text-xs);
  text-align: center;
  line-height: 1.4;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

Holen

# MCP (Claude Code / Cursor)
get_component({ name: "empty-hint" })

# Registry direkt
https://www.ekklesi.tools/design/registry/components/empty-hint.json