SectionAddButton

ui actionlayout

Dezenter „+ Neu"-Button für den actions-Slot eines SectionLabel. Gestrichelte Kontur, tritt optisch hinter den Inhalt zurück; Beschriftung über children überschreibbar.

Keine interaktive Live-Demo — siehe Code & Beispiele unten.

Abhängigkeiten

tokens section-label

Barrierefreiheit

Beispiele

Im Spaltenkopf

<SectionLabel actions={<SectionAddButton onClick={add} />}>Event</SectionLabel>

Genutzte Tokens · 8

--border--ease-standard--fg--focus-ring--font-body--motion-fast--muted--radius-sm

Quelldateien

components/ui/SectionAddButton.tsx tsx

import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';
import styles from './SectionAddButton.module.css';

interface SectionAddButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children?: ReactNode;
}

export const SectionAddButton = forwardRef<HTMLButtonElement, SectionAddButtonProps>(
  function SectionAddButton({ children = '+ Neu', className, type, ...rest }, ref) {
    const cls = [styles.btn, className].filter(Boolean).join(' ');
    return (
      <button ref={ref} type={type ?? 'button'} className={cls} {...rest}>
        {children}
      </button>
    );
  },
);

components/ui/SectionAddButton.module.css css

.btn {
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);
}

.btn:hover {
  color: var(--fg);
  border-color: color-mix(in oklab, var(--border), var(--fg) 35%);
  background: color-mix(in oklab, var(--fg), transparent 95%);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

Holen

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

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