Buttons 1.2.0

Custom button styles with .velin-btn. Six variants, three sizes, icon support, loading state, and full-width block mode. English: Buttons

Reifegrad: In VelinStyle 1.2.0 als stabil dokumentiert. Design Intelligence (Plan / Review / Agent-Meta) ist separat und, wo angegeben, Beta / Grundlage.

Wann verwenden

Primaer actions, secondary actions, and links styled as buttons with .velin-btn variants.
Icon-only- oder Ladezustaende, wenn du ein konsistentes fokussierbares Steuerelement fuer eine einzelne Aktion brauchst.

Wann nicht verwenden

Mutually exclusive options in a compact row — use Segmented control or Button Group.
Navigation zwischen Seiten: bevorzuge echte Links (<a>), wenn das Ziel eine URL ist.

Varianten

<button class="velin-btn velin-btn--primary">Primary</button>
<button class="velin-btn velin-btn--secondary">Secondary</button>
<button class="velin-btn velin-btn--outline">Outline</button>
<button class="velin-btn velin-btn--ghost">Ghost</button>
<button class="velin-btn velin-btn--danger">Danger</button>
<button class="velin-btn velin-btn--success">Success</button>

Groessen

<button class="velin-btn velin-btn--primary velin-btn--sm">Small</button>
<button class="velin-btn velin-btn--primary">Default</button>
<button class="velin-btn velin-btn--primary velin-btn--lg">Large</button>

Zustaende

<!-- Disabled -->
<button class="velin-btn velin-btn--primary" disabled>Disabled</button>

<!-- Loading spinner -->
<button class="velin-btn velin-btn--primary velin-btn--loading">Loading</button>

<!-- Full-width -->
<button class="velin-btn velin-btn--primary velin-btn--block">Block</button>

Icon Button

<!-- Icon-only -->
<button class="velin-btn velin-btn--primary velin-btn--icon" aria-label="Settings">
  <velin-icon name="settings" size="18"></velin-icon>
</button>

<!-- Icon + text -->
<button class="velin-btn velin-btn--outline">
  <velin-icon name="download" size="16" class="velin-btn__icon"></velin-icon>
  Download
</button>

Barrierefreiheit

Verwende fuer Aktionen immer <button>. Nutze <a class="velin-btn"> nur fuer Navigation.
Icon-only-Buttons benoetigen aria-label.
Deaktiviert buttons use both disabled attribute and aria-disabled="true" support.
Das Mindest-Touch-Ziel von 2.75rem (44 px) wird standardmaessig erzwungen.

CSS-Variablen

Variable	Beschreibung
`--velin-color-primary`	Hintergrund des primaeren Buttons
`--velin-color-primary-hover`	Hover-Zustand des primaeren Buttons
`--velin-color-on-primary`	Textfarbe des primaeren Buttons
`--velin-radius-md`	Rahmenradius
`--velin-transition-colors`	Farbuebergang
`--velin-transition-shadow`	Schattenuebergang