Buttons — action primitive

BLOCKSNIPPETPLANNED

blocks/button.liquid

snippets/button.liquid

Spec only This component is planned but not yet built. The interactive playground will land in a future Mock U-09 release. This page documents the component's purpose, schema surface, file structure, and dependencies so adjacent work can plan against it.

§ 01What it is.

Action primitive. Renders as <a> or <button> depending on whether a URL is supplied. Three variants (primary / secondary / ghost), three sizes (small / medium / large), four tones (default / inverted / brand / safety). Optional trailing arrow icon, optional leading icon. Loading state for form submissions. Focus-visible outline meets WCAG 2.2 AA.

§ 02When to use it.

Hero CTAs. Form submits. PDP add-to-cart. Quote-request triggers. Anywhere a single action needs the design system's button styling.

§ 03Files, type, build position.

Component type

Block — composable child of a section or other block. Lives in blocks/, added via the theme editor.
Snippet — reusable Liquid partial called from other Liquid files via {% render %}. Lives in snippets/, not directly merchant-editable.

Files

blocks/button.liquid snippets/button.liquid

Build position

Independent — uses no other component. Built second after Section, before composites.

§ 04Related components.

The components this one depends on, composes with, or pairs with. Click through to each.