Skip to content
MI Theme Docs

Button

File: snippets/button.liquid

Used in sections: homepage-gateway-voyage, homepage-hero, homepage-paradigm-shift, homepage-retreats-courses, page-header

Used in snippets: global-header, page-header

Screenshot not yet added.
Save as docs/src/assets/screenshots/snippet-button.png

Description

Button

Renders a styled pill-shaped anchor button with customizable text, URL, color scheme, size, and width. This is the standard button component used across the site — header navigation, homepage CTAs, page headers, etc.

Base styling: rounded-full pill shape, Gotham font, semibold, centered text.

Usage

{% render 'button', text: 'Start', url: '/start', color: 'primary' %}
  {% render 'button', text: 'Donate', url: '/give', color: 'primary-gradient', class: 'donate-btn' %}
  {% render 'button', text: 'Login', url: '/login', color: 'outline', class: 'nav-login' %}
  {% render 'button', text: 'Learn More', url: '/about', color: 'white', width: 'full' %}