Buttons

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

Variants

<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>

Sizes

<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>

States

<!-- 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>

Accessibility

Always use <button> for actions. Use <a class="velin-btn"> only for navigation.
Icon-only buttons require aria-label.
Disabled buttons use both disabled attribute and aria-disabled="true" support.
Minimum touch target of 2.75rem (44px) is enforced by default.

CSS Variables

Variable	Description
`--velin-color-primary`	Primary button background
`--velin-color-primary-hover`	Primary hover state
`--velin-color-on-primary`	Primary text colour
`--velin-radius-md`	Border radius
`--velin-transition-colors`	Colour transition
`--velin-transition-shadow`	Shadow transition