SectionLabel

ui typographylayout

Kleines, mono/uppercase Sektions-Label (z. B. Spaltentitel). Polymorph (h2/h3/div/span/label) und optional mit trailing `actions`-Slot, der das Label in eine Flex-Headerzeile verwandelt.

Lieder

Abhängigkeiten

tokens

Barrierefreiheit

Beispiele

Mit Aktionen

<SectionLabel actions={<Button size="square"><PlusIcon /></Button>}>
  Lieder
</SectionLabel>

Genutzte Tokens · 3

--font-mono--muted--space-2

Quelldateien

components/ui/SectionLabel.tsx tsx

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

interface SectionLabelProps {
  children: ReactNode;
  actions?: ReactNode;
  as?: 'h2' | 'h3' | 'div' | 'span' | 'label';
  className?: string;
}

export function SectionLabel({
  children,
  actions,
  as: Tag = 'h3',
  className,
}: SectionLabelProps) {
  if (actions === undefined) {
    const cls = [styles.label, className].filter(Boolean).join(' ');
    return <Tag className={cls}>{children}</Tag>;
  }

  const wrapperCls = [styles.header, className].filter(Boolean).join(' ');
  return (
    <header className={wrapperCls}>
      <Tag className={styles.label}>{children}</Tag>
      <div className={styles.actions}>{actions}</div>
    </header>
  );
}

components/ui/SectionLabel.module.css css

.label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  font-weight: inherit;
}

h2.label,
h3.label {
  min-height: 22px;
  display: flex;
  align-items: center;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 22px;
}

.actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

Holen

# MCP (Claude Code / Cursor)
get_component({ name: "section-label" })

# Registry direkt
https://www.ekklesi.tools/design/registry/components/section-label.json