> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Buttons and inputs

> Customize button typography, corner radius, and styling across your store.

Button and input settings control the appearance of all buttons, form inputs, and interactive elements throughout your store. Once you configure these settings, they apply consistently to add-to-cart buttons, form submissions, newsletter signups, and other interactive elements without needing section-by-section adjustments.

## What these settings control

* Button typography (font family, weight, size, letter spacing)
* Button corner radius (roundness)
* Button icon styles and positioning
* Visual consistency across all buttons and inputs
* Form input field appearance

## How to access

<Steps>
  <Step title="Open the Theme Customizer">
    From your Shopify admin, go to **Online Store** → **Themes** → **Customize**.
  </Step>

  <Step title="Navigate to button settings">
    In the theme editor sidebar, select **Theme settings** → **Buttons and inputs**.
  </Step>

  <Step title="Adjust settings">
    Modify typography, corner radius, and icon options as needed.
  </Step>

  <Step title="Save changes">
    Click **Save** to apply changes to all buttons and inputs across your store.
  </Step>
</Steps>

## Settings

<Tabs>
  <Tab title="Typography">
    ### Button typography

    Controls text appearance within all buttons throughout your store.

    **Font family**: Select the font used for button text. Available options depend on fonts configured in [Typography settings](/themes/release/theme-settings/typography).

    **Font weight**: Choose text weight for button labels (300-700). We recommend at least **500 (Medium)** for readability.

    **Font size**: Adjust button text size in **rem** units. Typical range is 0.875rem to 1.25rem. Minimum recommended size is 1rem (16px) for accessibility.

    **Letter spacing**: Control spacing between letters, measured in **em** units. Uppercase text often benefits from increased letter spacing (0.05-0.1em).

    <Tip>We recommend using your heading font for buttons to create visual emphasis and distinguish interactive elements.</Tip>
  </Tab>

  <Tab title="Shape & Style">
    ### Corner radius

    Controls roundness of buttons and input fields, measured in **rem** units. Higher values create more rounded corners.

    **0rem**: Sharp edges, modern geometric look\
    **0.25-0.5rem**: Subtle rounding, professional with warmth\
    **1-1.5rem**: Moderate rounding, friendly appearance\
    **2-5rem**: Pill-shaped, distinctive and playful

    <Tip>Match button corner radius with card corner radius for design consistency.</Tip>

    ### Button icon style

    Choose whether button icons use **Outline** (stroke-based) or **Solid** (filled) styles.

    **Outline**: Lighter, minimalist appearance\
    **Solid**: Bolder, more prominent with filled icons

    <Note>This setting affects icons in add-to-cart buttons, quick-add buttons, and other button elements throughout your store.</Note>
  </Tab>
</Tabs>

## Best practices

* Use at least 500 font weight and 1rem (16px) minimum font size for readability
* Match button corner radius with cards and inputs for design consistency
* Ensure minimum 4.5:1 contrast ratio between button text and background
* Test buttons on mobile devices to verify touch target sizes (minimum 44x44px)
* Add 0.05-0.1em letter spacing when using uppercase button text
* Use heading font for buttons to create visual emphasis

<Warning>These typography settings only affect text appearance and shape. Button colors are controlled separately in the Colors settings.</Warning>

## Related guides

* [Colors](/themes/release/theme-settings/colors) - Configure button background and text colors
* [Typography](/themes/release/theme-settings/typography) - Manage font families used in buttons
* [Cards](/themes/release/theme-settings/cards) - Coordinate corner radius with card elements
* [Products](/themes/release/theme-settings/products) - Configure add-to-cart and quick-add button behaviors