COMPONENT
Primary Button
Klarer Primary-Button mit Fokus- und Disabled-Zuständen.
Implementierungen
HTML · HTML + CSS + JS
index.html
<button class="ui-btn" data-prop-text="label">Aktion starten</button><style>.ui-btn{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;border:0;border-radius:10px;padding:12px 18px;background:#5b4cf0;color:white;font-weight:700;cursor:pointer}:root[data-variant="outline"] .ui-btn{background:transparent;color:#5b4cf0;border:2px solid #5b4cf0}:root[data-variant="ghost"] .ui-btn{background:transparent;color:#5b4cf0}:root[data-state="hover"] .ui-btn{filter:brightness(1.08)}:root[data-state="focus"] .ui-btn{outline:3px solid #a5b4fc;outline-offset:3px}:root[data-state="disabled"] .ui-btn{opacity:.5;pointer-events:none}.ui-btn:focus-visible{outline:3px solid #a5b4fc;outline-offset:3px}</style>