# SW Button — AI Agent Reference **Module name:** SW Button **Use this document when:** The user asks about the SW Button HubSpot module—what it does, how to configure it, or how to change buttons, alignment, icons, background, or spacing. --- ## Instructions for the AI Agent - You do **not** have HubSpot access unless explicitly given. Answer only from this document (and other docs supplied by the user). - When the user wants to change something, direct them to the exact **tab → group → field** names listed in the Configuration Reference. - Some settings (Module Settings, Module Background Settings, Module Background Video) are **standard across all modules**. Rather than restating everything, this doc references **`docs/MODULE-SETTINGS-BACKGROUND-STANDARD.md`**. Follow that doc for in-depth details and troubleshooting. - If a user request cannot be satisfied by module fields, explain that clearly and direct them to add CSS in their theme's `custom-styles.css` (or equivalent). - Support / bug issues: point to **https://smithworks.marketing/contact**. --- ## Support and Bug Reports For support or bug reports related to SW Button (or other Smithworks modules): - **Contact:** [smithworks.marketing/contact](https://smithworks.marketing/contact) --- ## 1. Purpose and When to Use The **SW Button** module provides: - **One or more CTA buttons** in a repeater. Each button has text, link, style (Primary, Secondary, Tertiary, White, Black, Dark, Light, Gradient One, Gradient Two, Simple Link), and optional **icon** (Font Awesome) with position (left/right) and purpose (decorative/semantic). - **Button alignment:** Desktop alignment (left, center, right) plus optional Override Tablet Alignment and Override Mobile Alignment for breakpoint-specific alignment. - **Module styling:** Module Settings (spacing, max width, height groups, vertical alignment), Module Background Settings (Theme Color, Custom Color, Gradient, Image, or **Video**), and Module Background Video (Content tab, when Background Option = Video). Per `docs/MODULE-SETTINGS-BACKGROUND-STANDARD.md`. Use it for **standalone CTA sections**, **button groups**, or **call-to-action blocks** that need flexible button count and styling. --- ## 2. Module Structure (What You See on the Page) 1. **Module wrapper** — A block with optional background (image, color, custom, gradient, or video) and spacing. Spacing is applied to the inner content wrapper for correct top/bottom padding (per standard). 2. **Button area** — One or more buttons in a row, aligned left, center, or right. Buttons wrap on smaller screens. Alignment can differ on tablet (768–991px) and mobile (≤767px) when overrides are enabled. Breakpoints: **Desktop** ≥992px; **Tablet** 768–991px; **Mobile** ≤767px. --- ## 3. Configuration Reference The module has **Content** and **Style** tabs. Group and field names below match the HubSpot editor. ### 3.1 Content Tab **Custom ID** — Optional. Replaces the default HTML `id` on the module wrapper. **Custom Classes** — Optional. Extra CSS classes on the module wrapper. --- **Buttons** (repeater) - **Where:** Content tab. - **What:** Add one or more buttons. Per button: - **Button Text** — Required. Label for the button. - **Button Link** — Required. URL or HubSpot link. - **Button Style** — Primary, Secondary, Tertiary, White, Black, Dark, Light, Gradient One, Gradient Two, or Simple Link. - **Add Icon** — Toggle. When ON, **Icon** group appears. - **Icon** (group, visible when Add Icon = ON) — **Icon** (Font Awesome picker), **Position** (Left or Right), **Purpose** (Decorative or Semantic). --- **Button Alignment** — Left, Center, or Right. Default: Center. **Override Tablet Alignment** — Toggle. When ON, **Tablet Button Alignment** appears. Breakpoint: 768px–991px (MD). **Tablet Button Alignment** — Visible when Override Tablet Alignment = ON. Auto (inherit), Left, Center, or Right. **Override Mobile Alignment** — Toggle. When ON, **Mobile Button Alignment** appears. Breakpoint: ≤767px (SM). **Mobile Button Alignment** — Visible when Override Mobile Alignment = ON. Auto (inherit), Left, Center, or Right. --- **Module Background Video** — *Always the last Content-tab group.* Only visible when Style → Module Background Settings → Background Option = **Video**. Content tab: **Video Type** (HubSpot Video, Video from files, External Embed), **HubSpot Video**, **Video File**, **External Embed**, **Poster image**. Overlay, base color, and playback toggles (Autoplay, Loop, Muted, Plays Inline) are in **Style** tab when Video. Follow `docs/MODULE-SETTINGS-BACKGROUND-STANDARD.md` §10 for exact behavior. --- ### 3.2 Style Tab This module uses the shared standards for Module Settings and Module Background Settings. Reference `docs/MODULE-SETTINGS-BACKGROUND-STANDARD.md` §10. 1. **Module Settings** (first Style group) — Spacing, Max Module Width, module height controls (XL + breakpoint overrides) with vertical alignment. Spacing is applied to the inner content wrapper so top and bottom padding work correctly (per §1 Layout: where to apply spacing). 2. **Module Background Settings** (second Style group) — Background Option (Theme Color, Custom Color, Gradient, Image, Video) plus all per-breakpoint image/position/repeat/overlay/base color controls. When Background Option = Video, overlay, base color, and playback toggles (Autoplay, Loop, Muted, Plays Inline) are here; configure the source and poster in the Content tab (Module Background Video group). --- ## 4. Common Tasks ("How Do I…") ### Add or edit buttons **Content** tab → **Buttons** (repeater). Add items. Set **Button Text**, **Button Link**, **Button Style**. Use **Add Icon** and **Icon** for an icon per button. ### Change button alignment (desktop) **Content** tab → **Button Alignment**. Choose Left, Center, or Right. ### Change button alignment on tablet **Content** tab → **Override Tablet Alignment** (ON) → **Tablet Button Alignment**. Choose Auto, Left, Center, or Right. ### Change button alignment on mobile **Content** tab → **Override Mobile Alignment** (ON) → **Mobile Button Alignment**. Choose Auto, Left, Center, or Right. ### Add an icon to a button **Content** tab → **Buttons** → expand the button → **Add Icon** (ON) → **Icon** group. Set **Icon** (picker), **Position** (Left or Right), **Purpose** (Decorative or Semantic). ### Change button style (Primary, Secondary, etc.) **Content** tab → **Buttons** → **Button Style** per item. ### Change module background **Style** tab → **Module Background Settings** → **Background Option**. Choose Theme Color, Custom Color, Gradient, Image, or Video. Configure the corresponding fields. ### Add video background **Style** tab → **Module Background Settings** → **Background Option** = Video (overlay, base, playback toggles here). Then **Content** tab → **Module Background Video** (bottom) → choose Video Type (HubSpot Video / Video from files / External Embed) and fill the relevant field; set Poster image. ### Change spacing (margin/padding) **Style** tab → **Module Settings** → **Spacing**. ### Change module height or max width **Style** tab → **Module Settings** → Max Module Width, XL Module Height (and breakpoint overrides if needed). ### Add custom ID or CSS class **Content** tab → **Custom ID**, **Custom Classes**. --- ## 5. Troubleshooting / Common Questions ### Top or bottom padding doesn't apply correctly The module applies spacing to the **inner content wrapper** (not the outer flex container) per the standard. If padding still fails, ensure you are using the latest module version and run the tests in `docs/MODULE-SETTINGS-BACKGROUND-STANDARD.md` §13. ### I added buttons but they don't show on the page Each button needs **Button Text** and **Button Link** filled in. If either is empty, the button is not rendered. **Fix:** Content tab → **Buttons**. Expand each item and ensure **Button Text** and **Button Link** are set. ### Where do I change button alignment? **Button Alignment** is on the **Content** tab, below the **Buttons** repeater—not on the Style tab. ### My video background shows a bar or doesn't fill Refer to `docs/MODULE-SETTINGS-BACKGROUND-STANDARD.md` and SW Text Headings FAQ for video background troubleshooting. The module uses the same cover-style sizing for embeds and HTML5 video. --- ## 6. When to Use Custom CSS Use **custom CSS** when the change cannot be done with the module's **Content** or **Style** fields (e.g. button font size, gap between buttons, specific hover effects). Add overrides in your theme's **custom-styles.css**. Use the CSS classes in the Appendix below. --- ## 7. Appendix: CSS Classes and Selectors | Element | Class(es) | Notes | |--------|-----------|--------| | Module wrapper | `.sw-button` | Plus custom_classes if set. id = Custom ID if set. Modifiers: `sw-button--has-bg-image`, `sw-button--has-bg-video` | | Inner content | `.sw-button__inner` | Spacing applied here. | | Video wrapper | `.sw-button__video-wrap` | When video background is active. | | Button container | `.sw-button__cta` | Flex container. Uses `sw-button__cta--left`, `--center`, `--right` for alignment. | | Button wrapper | `.btn-wrapper`, `.btn-{style}-wrapper` | Wraps each standard button. | | Simple link wrapper | `.simple-link-wrapper` | When Button Style = Simple Link. | | Button link | `.btn`, `.btn-{style}`, `.cta-button`, `.simple-link` | Standard buttons use `.btn`; simple link uses `.simple-link`. | **Data attributes:** `data-md-align`, `data-sm-align` (tablet/mobile alignment when overrides ON). **Breakpoints:** Desktop ≥992px; Tablet 768–991px; Mobile ≤767px. --- ## 8. Document Version - **Module reference:** SW Button (smithworks-2025, sw-theme-elements). - **Doc last updated:** 2026-02-02. - **2026-02-02:** Updated for Module Settings and Module Background Settings standard, video background option, spacing fix (inner wrapper). References `docs/MODULE-SETTINGS-BACKGROUND-STANDARD.md`. - When the module changes materially, this doc is updated; re-download to keep your AI agent current.