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

# Theme Editor - Buttons

> Configure button colours, border thickness, and corner radius for primary and secondary CTAs across the storefront.

<Frame caption="Theme Editor > Buttons">
  <img src="https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-buttons.webp?fit=max&auto=format&n=lZhc_tO8u1u_bL0Q&q=85&s=0b977376d40ef02a87e71daf06fef8fe" alt="Buttons settings panel in the theme editor" width="1920" height="1080" data-path="images/theme-editor-buttons.webp" />
</Frame>

The Buttons panel controls the appearance of primary (filled) and secondary (outline) call-to-action buttons across the storefront — add-to-cart, checkout, and navigation buttons all inherit these styles.

## Colors

| Setting        | Default   | Description                                             |
| -------------- | --------- | ------------------------------------------------------- |
| Background     | `#212121` | Fill colour for primary buttons.                        |
| Text           | `#FFFFFF` | Text colour inside primary buttons.                     |
| Outline button | `#212121` | Border and text colour for secondary (outline) buttons. |

## Border

| Setting       | Type   | Default | Range   | Description                                                                                           |
| ------------- | ------ | ------- | ------- | ----------------------------------------------------------------------------------------------------- |
| Thickness     | Slider | 1 px    | 0–4 px  | Border width on all buttons. Set to 0 to remove the border.                                           |
| Corner radius | Slider | 6 px    | 0–40 px | How rounded the button corners are. 0 gives sharp corners; higher values produce pill-shaped buttons. |

## CSS variables

<CodeGroup>
  ```css CSS variables theme={null}
  :root {
    --storefront-button-background-color: #212121;
    --storefront-button-text-color: #FFFFFF;
    --storefront-button-outline-color: #212121;
    --storefront-button-border-width: 1px;
    --storefront-button-border-radius: 6px;
  }
  ```
</CodeGroup>

## Related

<CardGroup cols={2}>
  <Card title="Inputs" icon="input-pipe" href="/docs/sales-channels/online-store/theme-editor/settings/inputs">
    Configure form field styles.
  </Card>

  <Card title="Colors" icon="palette" href="/docs/sales-channels/online-store/theme-editor/settings/colors">
    Define the storefront colour palette.
  </Card>
</CardGroup>