Buttons
ArchCSS buttons are native HTML buttons styled through utilities. Compose color, spacing, radius, border, and text utilities to create the button you need.
Basic buttons
Start with a semantic <button> or link and apply utilities.
<button class="bg-primary text-white px-4 py-2 rounded border-0">
Primary
</button>
<button class="bg-danger text-white px-4 py-2 rounded border-0">
Delete
</button>Outline buttons
Use background, border, and text utilities together to create outline styles.
<button class="bg-none text-primary border border-primary px-4 py-2 rounded">
Outline
</button>Sizes
Button size comes from spacing and text utilities.
<button class="bg-primary text-white px-2 py-1 font-12 rounded border-0">Small</button>
<button class="bg-primary text-white px-4 py-2 rounded border-0">Default</button>
<button class="bg-primary text-white px-5 py-3 fs-5 rounded border-0">Large</button>States
Use hover and opacity utilities for interaction states.
<button class="bg-primary hover:bg-dark text-white px-4 py-2 rounded border-0">
Hover me
</button>
<button class="bg-primary text-white px-4 py-2 rounded border-0 opacity-50" disabled>
Disabled
</button>ArchCSS concept: Buttons are not a separate component system. They are native elements composed with utilities.