Use ANTSAND button classes for actions in forms, dialogs, cards, checkout flows, and generated HMVC pages.
Buttons are semantic components first. Add utilities only for spacing, layout, and motion.
Semantic variants communicate action meaning. Use the visible label to carry meaning, not color alone.
<button class="antsand-btn antsand-btn-primary">Primary</button>
<button class="antsand-btn antsand-btn-secondary">Secondary</button>
<button class="antsand-btn antsand-btn-success">Success</button>
<button class="antsand-btn antsand-btn-danger">Danger</button>
<button class="antsand-btn antsand-btn-warning">Warning</button>
<button class="antsand-btn antsand-btn-info">Info</button>
<button class="antsand-btn antsand-btn-light">Light</button>
<button class="antsand-btn antsand-btn-dark">Dark</button>
<button class="antsand-btn antsand-btn-link">Link</button>The same classes can style links, buttons, and input actions. Links that behave like buttons should carry role="button".
<a class="antsand-btn antsand-btn-primary" href="#" role="button">Link</a>
<button class="antsand-btn antsand-btn-secondary" type="submit">Button</button>
<input class="antsand-btn antsand-btn-info" type="button" value="Input">
<input class="antsand-btn antsand-btn-success" type="submit" value="Submit">
<input class="antsand-btn antsand-btn-danger" type="reset" value="Reset">Use outline variants when the action is secondary or when solid color would overpower the surrounding UI.
<button class="antsand-btn antsand-btn-outline-primary">Primary</button>
<button class="antsand-btn antsand-btn-outline-secondary">Secondary</button>
<button class="antsand-btn antsand-btn-outline-success">Success</button>
<button class="antsand-btn antsand-btn-outline-danger">Danger</button>
<button class="antsand-btn antsand-btn-outline-warning">Warning</button>
<button class="antsand-btn antsand-btn-outline-info">Info</button>
<button class="antsand-btn antsand-btn-outline-dark">Dark</button>Use size classes for interface hierarchy. Use pill shape for filters, onboarding CTAs, and soft action surfaces.
<button class="antsand-btn antsand-btn-primary antsand-btn-sm">Small</button>
<button class="antsand-btn antsand-btn-primary">Default</button>
<button class="antsand-btn antsand-btn-primary antsand-btn-lg">Large</button>
<button class="antsand-btn antsand-btn-info antsand-btn-pill">Pill</button>State should be explicit so generated forms, checkout, and HMVC flows can reason about what the action means.
<button class="antsand-btn antsand-btn-primary active" aria-pressed="true">Active</button>
<button class="antsand-btn antsand-btn-secondary" aria-pressed="true">Pressed</button>
<a class="antsand-btn antsand-btn-primary disabled" aria-disabled="true" role="button">Disabled</a>Use button rows for normal inline action groups. Use block buttons for checkout, payment, and single-primary mobile actions.
<div class="antsand-btn-row">
<button class="antsand-btn antsand-btn-outline-secondary">Secondary action</button>
<button class="antsand-btn antsand-btn-primary">Primary action</button>
</div>
<button class="antsand-btn antsand-btn-success antsand-btn-block">Block button</button>