Tutorial 04 · Components

Buttons — variants & states

All button variants, sizes, groups, disabled and loading — with real lucUI classes.

12 minBeginnerlucUI 2 · v2.1.3

Objectives

Render all accents: primary, azure, tangerine, viridian.
Handle outline/ghost/transparency, sm/lg, disabled, loading.
Use .luc-btn-group correctly.

Steps

Variants

buttons.html

<button class="luc-btn luc-btn-primary">Primary</button>
<button class="luc-btn luc-btn-azure">Azure</button>
<button class="luc-btn luc-btn-outline">Outline</button>
<button class="luc-btn luc-btn-ghost">Ghost</button>
<button class="luc-btn luc-btn-transparency">Transparency</button>

Sizes & states

Add .loading for spinner via pseudo.

Group

group.html

<div class="luc-btn-group">
  <button class="luc-btn luc-btn-outline">Prev</button>
  <button class="luc-btn luc-btn-primary">1</button>
  <button class="luc-btn luc-btn-outline">Next</button>
</div>

Result

Full-width on 320px, 48px touch target, focus ring gold→azure.

Exercise

Build a CTA row: Primary + Ghost with icon, verify contrast in light mode.

← Previous Next →