[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore atoms button in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-overview)

[Badge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-badge)

[Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button)

[Checkbox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-checkbox)

[Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-icon)

[Input](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-input)

[Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-label)

[Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-link)

[List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-list)

[Loader](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-loader)

[Overlay](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-overlay)

[Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-price)

[Radio](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-radio)

[Select](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-select)

[SROnly](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-sr-only)

[Skeleton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-skeleton)

[Slider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-slider)

[Textarea](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-textarea)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/molecules-overview)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-overview)

[Badge](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-badge)

[Button](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button)

[Checkbox](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-checkbox)

[Icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-icon)

[Input](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-input)

[Label](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-label)

[Link](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-link)

[List](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-list)

[Loader](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-loader)

[Overlay](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-overlay)

[Price](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-price)

[Radio](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-radio)

[Select](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-select)

[SROnly](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-sr-only)

[Skeleton](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-skeleton)

[Slider](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-slider)

[Textarea](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-textarea)

[Molecules](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/molecules-overview)

[Organisms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/organisms-overview)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/components-index)

[Atoms](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-overview)

Button

Buttons indicate actions that users can take.

[ Source code](https://read.calvincode.net/reader?url=https://github.com/vtex/faststore/tree/main/packages/components/src/atoms/Button)

Buttons indicate actions that users can take, such as adding an item to the cart, submitting a form, and proceeding with an operation. Use the `Button` component to communicate user actions for the following components:

* `Buy Now` and `Add to Cart` buttons in [Product Cards](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-product-card).
* Submit or cancel actions on [Modal](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-modal) dialogs.

Example

Code

Primary

Secondary

Tertiary

Button with an Icon

Small

---

## Usage

### Import the component

`1

import { Button } from '@faststore/ui'

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import '@faststore/ui/src/components/atoms/Button/styles.scss';

`

For details, see [Importing FastStore UI component styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/using-themes-importing-ui-components-styles).

---

## Examples

### Variants

#### Primary

Example

Code

Button

#### Primary Inverse

Example

Code

Button

#### Secondary

Example

Code

Button

#### Secondary Inverse

Example

Code

Button

#### Tertiary

Example

Code

Button

#### Tertiary Inverse

Example

Code

Button

---

### Disabled

Example

Code

Button

### Loading

Example

Code

##### No label

Buy

##### With label

Loading

Loading state

##### Trigger

Click me to trigger loading

### Size

#### Small

Example

Code

Button

#### Small with an icon

Example

Code

Button

### Button with an icon

Example

Code

Add to Cart

---

## Design tokens

| Local token                      | Default value/Global token linked                                                    |
| -------------------------------- | ------------------------------------------------------------------------------------ |
| \--fs-button-padding             | calc(var(--fs-spacing-1) - (var(--fs-button-border-width) \* 2)) var(--fs-spacing-3) |
| \--fs-button-height              | var(--fs-control-tap-size)                                                           |
| \--fs-button-gap                 | var(--fs-spacing-2)                                                                  |
| \--fs-button-shadow              | var(--fs-shadow)                                                                     |
| \--fs-button-shadow-hover        | var(--fs-button-shadow)                                                              |
| \--fs-button-border-radius       | var(--fs-border-radius)                                                              |
| \--fs-button-border-width        | var(--fs-border-width-thick)                                                         |
| \--fs-button-border-color        | transparent                                                                          |
| \--fs-button-text-size           | var(--fs-text-size-base)                                                             |
| \--fs-button-text-weight         | var(--fs-text-weight-bold)                                                           |
| \--fs-button-transition-function | var(--fs-transition-function)                                                        |
| \--fs-button-transition-property | var(--fs-transition-property)                                                        |
| \--fs-button-transition-timing   | var(--fs-transition-timing)                                                          |

### Design tokens: Button with an icon

Buttons with icons reserve padding and alignment for the glyph and label, improving scannability while preserving clear touch targets and visual balance.

| Local token               | Default value/Global token linked |
| ------------------------- | --------------------------------- |
| \--fs-button-icon-padding | 0 var(--fs-spacing-1)             |

### Design tokens: Primary

Primary buttons use high-contrast colors and bold emphasis to highlight the main action on a page, drawing focus and encouraging completion.

| Local token                              | Default value/Global token linked     |
| ---------------------------------------- | ------------------------------------- |
| \--fs-button-primary-text-color          | var(--fs-color-primary-text)          |
| \--fs-button-primary-text-color-hover    | var(--fs-button-primary-text-color)   |
| \--fs-button-primary-text-color-active   | var(--fs-button-primary-text-color)   |
| \--fs-button-primary-bkg-color           | var(--fs-color-primary-bkg)           |
| \--fs-button-primary-bkg-color-hover     | var(--fs-color-primary-bkg-hover)     |
| \--fs-button-primary-bkg-color-active    | var(--fs-color-primary-bkg-active)    |
| \--fs-button-primary-border-color        | transparent                           |
| \--fs-button-primary-border-color-hover  | var(--fs-button-primary-border-color) |
| \--fs-button-primary-border-color-active | var(--fs-button-primary-border-color) |
| \--fs-button-primary-shadow-hover        | var(--fs-button-shadow-hover)         |

### Design tokens: Primary Inverse

Primary inverse buttons adapt the primary style for dark or colored backgrounds, inverting surfaces and text to maintain prominence and accessible contrast.

| Local token                                      | Default value/Global token linked        |
| ------------------------------------------------ | ---------------------------------------- |
| \--fs-button-primary-inverse-text-color          | var(--fs-button-primary-bkg-color)       |
| \--fs-button-primary-inverse-text-color-hover    | var(--fs-button-primary-bkg-color)       |
| \--fs-button-primary-inverse-text-color-active   | var(--fs-button-primary-bkg-color)       |
| \--fs-button-primary-inverse-bkg-color           | var(--fs-button-primary-text-color)      |
| \--fs-button-primary-inverse-bkg-color-hover     | var(--fs-color-primary-bkg-light)        |
| \--fs-button-primary-inverse-bkg-color-active    | var(--fs-color-primary-bkg-light-active) |
| \--fs-button-primary-inverse-border-color        | var(--fs-button-primary-border-color)    |
| \--fs-button-primary-inverse-border-color-hover  | var(--fs-button-primary-border-color)    |
| \--fs-button-primary-inverse-border-color-active | var(--fs-button-primary-border-color)    |
| \--fs-button-primary-inverse-shadow-hover        | var(--fs-button-shadow-hover)            |

### Design tokens: Secondary

Secondary buttons apply moderate emphasis to support alternative actions, providing clear affordance without competing with the primary call to action.

| Local token                                | Default value/Global token linked           |
| ------------------------------------------ | ------------------------------------------- |
| \--fs-button-secondary-text-color          | var(--fs-color-secondary-text)              |
| \--fs-button-secondary-text-color-hover    | var(--fs-color-text-inverse)                |
| \--fs-button-secondary-text-color-active   | var(--fs-button-secondary-text-color-hover) |
| \--fs-button-secondary-bkg-color           | var(--fs-color-secondary-bkg)               |
| \--fs-button-secondary-bkg-color-hover     | var(--fs-color-secondary-bkg-hover)         |
| \--fs-button-secondary-bkg-color-active    | var(--fs-color-secondary-bkg-active)        |
| \--fs-button-secondary-border-color        | var(--fs-button-secondary-text-color)       |
| \--fs-button-secondary-border-color-hover  | var(--fs-button-secondary-bkg-color-hover)  |
| \--fs-button-secondary-border-color-active | var(--fs-button-secondary-bkg-color-active) |
| \--fs-button-secondary-shadow-hover        | var(--fs-button-shadow-hover)               |

### Design tokens: Secondary Inverse

Secondary inverse buttons tune colors for dark or colored surfaces, preserving contrast and hierarchy while remaining visually subordinate to primary actions.

| Local token                                        | Default value/Global token linked                   |
| -------------------------------------------------- | --------------------------------------------------- |
| \--fs-button-secondary-inverse-text-color          | var(--fs-button-secondary-text-color-hover)         |
| \--fs-button-secondary-inverse-text-color-hover    | var(--fs-button-secondary-text-color)               |
| \--fs-button-secondary-inverse-text-color-active   | var(--fs-button-secondary-inverse-text-color-hover) |
| \--fs-button-secondary-inverse-bkg-color           | var(--fs-button-secondary-bkg-color)                |
| \--fs-button-secondary-inverse-bkg-color-hover     | var(--fs-button-secondary-text-color-hover)         |
| \--fs-button-secondary-inverse-bkg-color-active    | var(--fs-color-secondary-bkg-light)                 |
| \--fs-button-secondary-inverse-border-color        | var(--fs-button-secondary-inverse-text-color)       |
| \--fs-button-secondary-inverse-border-color-hover  | var(--fs-button-secondary-inverse-bkg-color-hover)  |
| \--fs-button-secondary-inverse-border-color-active | var(--fs-button-secondary-inverse-bkg-color-hover)  |
| \--fs-button-secondary-inverse-shadow-hover        | var(--fs-button-shadow-hover)                       |

### Design tokens: Tertiary

Tertiary buttons use minimal emphasis—often transparent backgrounds and subtle borders—for low-priority or inline actions that should not distract from primary tasks.

| Local token                               | Default value/Global token linked      |
| ----------------------------------------- | -------------------------------------- |
| \--fs-button-tertiary-text-color          | var(--fs-color-tertiary-text)          |
| \--fs-button-tertiary-text-color-hover    | var(--fs-button-tertiary-text-color)   |
| \--fs-button-tertiary-text-color-active   | var(--fs-button-primary-bkg-color)     |
| \--fs-button-tertiary-bkg-color           | var(--fs-color-tertiary-bkg)           |
| \--fs-button-tertiary-bkg-color-hover     | var(--fs-color-tertiary-bkg-hover)     |
| \--fs-button-tertiary-bkg-color-active    | var(--fs-color-tertiary-bkg-active)    |
| \--fs-button-tertiary-border-color        | transparent                            |
| \--fs-button-tertiary-border-color-hover  | var(--fs-button-tertiary-border-color) |
| \--fs-button-tertiary-border-color-active | var(--fs-button-tertiary-border-color) |
| \--fs-button-tertiary-shadow-hover        | var(--fs-button-shadow-hover)          |

### Design tokens: Tertiary Inverse

Tertiary inverse buttons adjust low-emphasis styling for dark or colored backgrounds, ensuring legibility and subtle affordance without adding visual weight.

| Local token                                       | Default value/Global token linked            |
| ------------------------------------------------- | -------------------------------------------- |
| \--fs-button-tertiary-inverse-text-color          | var(--fs-button-secondary-text-color-hover)  |
| \--fs-button-tertiary-inverse-text-color-hover    | var(--fs-button-secondary-text-color-hover)  |
| \--fs-button-tertiary-inverse-text-color-active   | var(--fs-button-secondary-text-color-hover)  |
| \--fs-button-tertiary-inverse-bkg-color           | var(--fs-button-secondary-inverse-bkg-color) |
| \--fs-button-tertiary-inverse-bkg-color-hover     | var(--fs-button-primary-bkg-color-hover)     |
| \--fs-button-tertiary-inverse-bkg-color-active    | var(--fs-button-primary-bkg-color-active)    |
| \--fs-button-tertiary-inverse-border-color        | var(--fs-button-tertiary-border-color)       |
| \--fs-button-tertiary-inverse-border-color-hover  | var(--fs-button-tertiary-border-color)       |
| \--fs-button-tertiary-inverse-border-color-active | var(--fs-button-tertiary-border-color)       |
| \--fs-button-tertiary-inverse-shadow-hover        | var(--fs-button-shadow-hover)                |

### Design tokens: Disabled

Disabled buttons reduce contrast and suppress interactive feedback to clearly communicate inoperability while preserving layout and alignment.

| Local token                      | Default value/Global token linked |
| -------------------------------- | --------------------------------- |
| \--fs-button-disabled-bkg-color  | var(--fs-color-disabled-bkg)      |
| \--fs-button-disabled-text-color | var(--fs-color-disabled-text)     |

### Design tokens: Loading

Loading buttons allocate spacing and motion for progress feedback—optionally with a label—to indicate that an action is processing.

| Local token                           | Default value/Global token linked |
| ------------------------------------- | --------------------------------- |
| \--fs-button-loading-label-column-gap | var(--fs-spacing-3)               |

### Design tokens: Small

Small buttons tighten padding, height, and icon dimensions for dense layouts, balancing compactness with readability and usable tap targets.

| Local token                    | Default value/Global token linked       |
| ------------------------------ | --------------------------------------- |
| \--fs-button-small-padding     | var(--fs-spacing-0) var(--fs-spacing-1) |
| \--fs-button-small-min-height  | var(--fs-spacing-5)                     |
| \--fs-button-small-gap         | var(--fs-spacing-1)                     |
| \--fs-button-small-icon-width  | var(--fs-spacing-3)                     |
| \--fs-button-small-icon-height | var(--fs-button-small-icon-width)       |

### Design tokens: Small with an icon

Small icon buttons fine-tune spacing and icon size in compact contexts, maintaining label clarity and alignment within tighter space constraints.

| Local token                    | Default value/Global token linked       |
| ------------------------------ | --------------------------------------- |
| \--fs-button-small-padding     | var(--fs-spacing-0) var(--fs-spacing-1) |
| \--fs-button-small-min-height  | var(--fs-spacing-5)                     |
| \--fs-button-small-gap         | var(--fs-spacing-1)                     |
| \--fs-button-small-icon-width  | var(--fs-spacing-3)                     |
| \--fs-button-small-icon-height | var(--fs-button-small-icon-width)       |

---

## Data attributes

You can target and override `Button` styles using the following data attributes:

`data-fs-button`

`data-fs-button-variant="primary | secondary | tertiary"`

`data-fs-button-inverse`

`data-fs-button-size="small | regular"`

`data-fs-button-loading="true"`

---

## Props

| Name             | Type                     | Description                                                                            | Default                                |    |                          |                             |                     |             |                                                     |
| ---------------- | ------------------------ | -------------------------------------------------------------------------------------- | -------------------------------------- | -- | ------------------------ | --------------------------- | ------------------- | ----------- | --------------------------------------------------- |
| **testId**       | string                   | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-button                              |    |                          |                             |                     |             |                                                     |
| **variant**      | "primary" \| "secondary" | "tertiary"                                                                             | Specifies the component color variant. |    |                          |                             |                     |             |                                                     |
| **size**         | "small" \| "regular"     | Specifies the size variant.                                                            | regular                                |    |                          |                             |                     |             |                                                     |
| **inverse**      | false \| true            | Defines the use of inverted colors.                                                    |                                        |    |                          |                             |                     |             |                                                     |
| **disabled**     | false \| true            | Specifies that this button should be disabled.                                         |                                        |    |                          |                             |                     |             |                                                     |
| **icon**         | string \| number         | false                                                                                | true                                   | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | A React component that will be rendered as an icon. |
| **loading**      | false \| true            | Boolean that represents a loading state.                                               |                                        |    |                          |                             |                     |             |                                                     |
| **loadingLabel** | string                   | Specifies a label for loading state.                                                   |                                        |    |                          |                             |                     |             |                                                     |
| **iconPosition** | "left" \| "right"        | Specifies where the icon should be positioned                                          | left                                   |    |                          |                             |                     |             |                                                     |

---

## Best Practices

### ✅ Dos

* Use standard button designs and shapes to make your button **clearly clickable**.
* Use styles to **communicate the importance of an action** by visually differentiating [primary](#primary) and [secondary](#secondary) buttons.
* Make buttons **finger-friendly** for mobile users and large enough for **reliable interactions**. Generally, touch targets are at least 44 by 44 CSS pixels.
* Use **task-specific** words to write button labels.
* Place the buttons in an **order that reflects a conversation between the user and the system**.
* Provide visual or audio **feedback on interactions**. Whenever a user interacts with a button, it should change its state to indicate that an action is taking place.
* Define a style system for your button states (e.g., normal, focus, hover, active, pressed, disabled).
* Use icon-only buttons only for widespread actions with highly standardized icons, such as a cross for closing.
* Use the `aria-label` attribute to provide a textual alternative for icon-only buttons.

### ❌ Don'ts

* Don't make users hunt for buttons. Place buttons where users expect to see them or can easily find them.
* Don't rely on icons to communicate complex actions.
* Don't use generic words that can potentially confuse users.
* Avoid cluttering the UI with too many buttons.
* Avoid having more than one primary action button on the screen at a time.
* Avoid using disabled buttons, if possible. Instead, prefer to hide the unavailable option.
* Don't place buttons next to [Badges](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge). Although badges and buttons are similar in appearance, badges are not interactive and may confuse users if not used in the proper context.
* Don't use buttons as [Links](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-link). Links are not intended to invite users to take action. Instead, they redirect users somewhere.
* Avoid using `aria-label` when the button already has a label.

---

## Related components

* IconButton
A button that contains only an icon.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-icon-button)
* Buy Now
BuyButton
A button with the intent of directly sending the user to the checkout or cart step.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-buy-button)
* Link Button
LinkButton
Similar to `Button`, but navigates users between pages instead of executing actions.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/molecules-link-button)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/atoms/button.mdx)

[Badge« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-badge)[CheckboxNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-checkbox)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23import-styles)

[Examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23examples)

[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23variants)[Disabled](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23disabled)[Loading](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23loading)[Size](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23size)[Button with an icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23button-with-an-icon)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens)

[Design tokens: Button with an icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-button-with-an-icon)[Design tokens: Primary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-primary)[Design tokens: Primary Inverse](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-primary-inverse)[Design tokens: Secondary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-secondary)[Design tokens: Secondary Inverse](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-secondary-inverse)[Design tokens: Tertiary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-tertiary)[Design tokens: Tertiary Inverse](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-tertiary-inverse)[Design tokens: Disabled](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-disabled)[Design tokens: Loading](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-loading)[Design tokens: Small](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-small)[Design tokens: Small with an icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-small-with-an-icon)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23props)

[Best Practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23best-practices)

[✅ Dos](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23-dos)[❌ Don'ts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23-donts)

[Related components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23related-components)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/components/atoms/button.mdx)

Copy page

On this page

ON THIS PAGE

[Usage](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23usage)

[Import the component](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23import-the-component)[Import styles](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23import-styles)

[Examples](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23examples)

[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23variants)[Disabled](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23disabled)[Loading](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23loading)[Size](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23size)[Button with an icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23button-with-an-icon)

[Design tokens](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens)

[Design tokens: Button with an icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-button-with-an-icon)[Design tokens: Primary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-primary)[Design tokens: Primary Inverse](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-primary-inverse)[Design tokens: Secondary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-secondary)[Design tokens: Secondary Inverse](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-secondary-inverse)[Design tokens: Tertiary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-tertiary)[Design tokens: Tertiary Inverse](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-tertiary-inverse)[Design tokens: Disabled](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-disabled)[Design tokens: Loading](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-loading)[Design tokens: Small](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-small)[Design tokens: Small with an icon](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23design-tokens-small-with-an-icon)

[Data attributes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23data-attributes)

[Props](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23props)

[Best Practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23best-practices)

[✅ Dos](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23-dos)[❌ Don'ts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23-donts)

[Related components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-button/docs/guides/faststore/atoms-button%23related-components)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore getting started 5 integrating your project with the headless cms in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-overview)

[1\. Setting up your environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-1-setting-up-your-environment)

[2\. Starting a new FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-2-starting-the-project)

[3\. Running the project locally](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-3-running-the-project-locally)

[4\. Understanding the project structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-4-understanding-the-project-structure)

[5\. Integrating your project with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms)

[Setting up the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-setting-up-the-headless-cms)

[Structuring Content Types and Sections](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-structuring-content-types-and-sections)

[Promoting your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-promoting-your-headless-cms-changes)

[6\. Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-6-next-steps)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-glossary)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-overview)

[1\. Setting up your environment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-1-setting-up-your-environment)

[2\. Starting a new FastStore project](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-2-starting-the-project)

[3\. Running the project locally](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-3-running-the-project-locally)

[4\. Understanding the project structure](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-4-understanding-the-project-structure)

[5\. Integrating your project with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms)

[Setting up the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-setting-up-the-headless-cms)

[Structuring Content Types and Sections](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-structuring-content-types-and-sections)

[Promoting your changes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-promoting-your-headless-cms-changes)

[6\. Next steps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-6-next-steps)

[Glossary](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-glossary)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/api-extensions-overview)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-overview)

5\. Integrating your project with the Headless CMS

Connect your FastStore project with the Headless CMS to manage and publish your store’s content efficiently.

In this step, you'll connect your FastStore project to [Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-overview) so editors can create, preview, and publish content. You'll also configure the webhooks that keep builds and previews in sync—without this integration, CMS changes won't reach your storefront.

## What you'll accomplish

By the end of this step, you will have:

* Configured Headless CMS webhooks to trigger builds when content is published
* Set up preview URLs for content editors to see changes before going live
* Configured WebOps to communicate CMS updates back to your Git repository
* Established a complete content workflow where CMS changes automatically sync with your codebase

This integration enables your content team to manage store content independently while keeping everything in sync with your development workflow.

## Step 1: Configuring the Headless CMS

Configure the URLs of the webhooks used by the Headless CMS app.

1. In the VTEX Admin, access **Storefront > Headless CMS**.
2. In the FastStore project interface, click on `Settings` (⚙).
3. In **Settings**, click the `Build` tab.
4. In **Build Webhook URL**, click `Add`.
5. Enter the following value. _Replace the values between curly brackets according to your scenario._
`1
https://app.io.vtex.com/vtex.cms-builder-sf-jamstack/v1/{account}/master/build-releases
`
6. Click **SAVE**.

> When an editor clicks to publish a page using the Headless CMS interface, the CMS calls the **Build Webhook URL**, which changes the page's status to `published`. The CMS then waits for the content to be built in the background.

1. Fill in the **Preview URL** field with your production URL. This URL activates the button on the Headless CMS, allowing you to preview the changes made to a page. _Replace the values between curly brackets according to your scenario._

## Step 2: Communicating WebOps updates to the Headless CMS

If you are developing your FastStore project with CI/CD and Headless CMS, you must ensure that CI/CD is aware of every CMS update performed via the VTEX Admin. To do so, you must configure the WebOps webhooks responsible for communicating with the Headless CMS as follows.

1. Open your FastStore project in any code editor of your preference.
2. Edit the `discovery.config.js` file in the root directory of your project.
3. In the Headless CMS configuration, add the `webhookUrls` property corresponding to your store website as follows:
discovery.config.js
`1
"vtexHeadlessCms": {
2
 webhookUrls: [
3
 "https://{account}.myvtex.com/cms-releases/webhook-releases"
4
 ]
5
}
`
4. Open a Pull Request in your project, including the previous changes.
5. Merge the Pull Request.

Now you can make changes to the Headless CMS and check if commits are being created in the project. In the following example, the `Hero` title was modified to `10% off on first purchase`, and we can see that it generated a commit in the repository.

![{"base64":"  ","img":{"width":950,"height":441,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":110781,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/cms-example-commits___7bb21be1504033098122feb013667b49.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/cms-example-commits___7bb21be1504033098122feb013667b49.png)

## Next step

Now that Headless CMS is integrated, set up content types and sections for your editors: [Setting up the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/headless-cms-2-setting-up-the-headless-cms)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/getting-started/5-integrating-your-project-with-the-headless-cms.mdx)

[4\. Understanding the project structure« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-4-understanding-the-project-structure)[Setting up the Headless CMSNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-setting-up-the-headless-cms)

See also

[VTEX IO CLIGuides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

ON THIS PAGE

[What you'll accomplish](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms%23what-youll-accomplish)

[Step 1: Configuring the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms%23step-1-configuring-the-headless-cms)

[Step 2: Communicating WebOps updates to the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms%23step-2-communicating-webops-updates-to-the-headless-cms)

[Next step](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms%23next-step)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/getting-started/5-integrating-your-project-with-the-headless-cms.mdx)

Copy page

On this page

ON THIS PAGE

[What you'll accomplish](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms%23what-youll-accomplish)

[Step 1: Configuring the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms%23step-1-configuring-the-headless-cms)

[Step 2: Communicating WebOps updates to the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms%23step-2-communicating-webops-updates-to-the-headless-cms)

[Next step](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms/docs/guides/faststore/getting-started-5-integrating-your-project-with-the-headless-cms%23next-step)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)