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

# Choose the button corner style in Facet

> Pick the corner style for every button in Facet: diagonal cut corners, fully rounded, soft rounded or square, and see where the style is applied.

The **Buttons** setting gives every button in Facet the same corner shape. One choice here changes the add to cart button, the buttons in banners and sections, and the quick add buttons on product cards. This page describes each style.

## What these settings control

* The corners of primary, secondary and tertiary buttons across the store.
* The corners of the small quick add buttons on product cards and of other small buttons on product pages.
* The cut corners of the cards in the **Socials** section, when the style is **Diagonal**.

Button colors come from the color scheme of the section. See [Colors](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/colors.md).

## How to access

**1. Open the Theme Customizer**

In your Shopify admin, open **Online Store**, then **Themes**, and click **Customize** next to Facet.

**2. Open Theme settings**

Click the **Theme settings** icon in the left sidebar.

**3. Open Buttons**

Expand **Buttons** and pick a **Corner style**.

![The theme editor with Theme settings open and the Buttons group expanded in the sidebar.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/buttons/buttons-location.jpg?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=137e4a1a0a068ff632e186e181af7e24)

## Button settings

![Theme editor sidebar showing the Buttons theme settings: Buttons, Corner style.](https://mintcdn.com/lightsout/Svjpo54WQSiE2VRv/images/themes/facet/theme-settings/buttons/buttons-settings-1.png?fit=max\&auto=format\&n=Svjpo54WQSiE2VRv\&q=85\&s=f29cd316e4c0608fe9bdda338d11aef2)

> [accordion] Corner style
>
> * **Diagonal**: square buttons with each corner cut off at an angle, like an octagon. Outlined buttons draw the same cut-corner outline.
> * **Rounded**: fully rounded ends, like a pill.
> * **Soft rounded** (default): slightly rounded corners (10 pixels).
> * **None**: square corners.

> [!NOTE]
>
> Every button uses the body font in capital letters. Change the font in [Typography](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/typography.md).

## Best practices

* **Match the corner radius.** Soft rounded buttons sit well with **Medium** or **Large** card and input corners. Square buttons sit well with **None**. Set them in [Corner radius](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/corner-radius.md).
* **Check short labels with Diagonal.** The cut corners take a little space at each end, so preview buttons with one-word labels.
* **Look at the product page.** It holds the most buttons in one place, so it shows quickly whether a style fits your brand.

## Related guides

> [card] [Corner radius](https://docs.shopify.lightsout.agency/themes/facet/theme-settings/corner-radius.md)
>
> Round the corners of form fields and cards.

> [card] [Theme blocks](https://docs.shopify.lightsout.agency/themes/facet/theme-blocks.md)
>
> Add buttons to sections with the Button block.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.