[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 badge 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-badge/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/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-badge/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-badge/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-badge/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-badge/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-badge/updates/release-notes)

Storefront Development

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

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/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-badge/docs/guides/faststore/getting-started-overview)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/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-badge/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-badge/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-badge/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/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-badge/docs/guides/faststore/getting-started-overview)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/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-badge/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-badge/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-badge/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

Badge

Status descriptors used to emphasize an item's state.

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

The `Badge` component is used to emphasize an item's state by displaying concise, non-interactive labels. Typical use cases include:

* Highlighting promotional discounts
* Indicating product features (e.g., `vegan` or `cruelty-free`)
* Displaying availability statuses (e.g., `NEW`, `ONLY 1 LEFT`, and `OUT OF STOCK`)

Example

Code

Neutral

Info

Highlighted

Neutral & Big

Success

Warning

Danger

---

## Usage

### Import the component

`1

import { Badge } from "@faststore/ui";

`

### Import styles

To apply styles, include the following in your stylesheet:

`1

@import "@faststore/ui/src/components/atoms/Badge/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

### Size

The `Badge` component can be displayed in two sizes: [small (default)](#small) and [big](#big).

#### Small (Default)

Example

Code

Small Badge

#### Big

Example

Code

Big Badge

### Variants

#### Neutral

Example

Code

Neutral Badge

#### Success

Example

Code

Success Badge

#### Highlighted

Example

Code

Highlighted Badge

#### Info

Example

Code

Info Badge

#### Warning

Example

Code

Warning Badge

#### Danger

Example

Code

Danger Badge

---

## Design tokens

| Local token                     | Default value/Global token linked       |
| ------------------------------- | --------------------------------------- |
| \--fs-badge-padding             | var(--fs-spacing-0) var(--fs-spacing-2) |
| \--fs-badge-border-radius       | var(--fs-border-radius-pill)            |
| \--fs-badge-border-width        | 0                                       |
| \--fs-badge-border-style        | none                                    |
| \--fs-badge-border-color        | transparent                             |
| \--fs-badge-bkg-color           | var(--fs-color-neutral-bkg)             |
| \--fs-badge-text-color          | var(--fs-color-text)                    |
| \--fs-badge-text-size           | var(--fs-text-size-tiny)                |
| \--fs-badge-text-weight         | var(--fs-text-weight-bold)              |
| \--fs-badge-transition-function | var(--fs-transition-function)           |
| \--fs-badge-transition-property | var(--fs-transition-property)           |
| \--fs-badge-transition-timing   | var(--fs-transition-timing)             |

### Design tokens: Big

Big badges use increased padding and typography to create a more prominent and impactful component, suitable for key highlights or calls to action.

| Local token               | Default value/Global token linked       |
| ------------------------- | --------------------------------------- |
| \--fs-badge-big-text-size | var(--fs-text-size-legend)              |
| \--fs-badge-big-padding   | var(--fs-spacing-1) var(--fs-spacing-2) |

### Design tokens: Neutral

Neutral badges present information in a low-contrast style, ideal for secondary statuses or default states.

| Local token                      | Default value/Global token linked |
| -------------------------------- | --------------------------------- |
| \--fs-badge-neutral-bkg-color    | var(--fs-color-neutral-bkg)       |
| \--fs-badge-neutral-text-color   | var(--fs-badge-text-color)        |
| \--fs-badge-neutral-border-color | var(--fs-color-neutral-bkg)       |

### Design tokens: Success

Success badges use a green palette to confirm actions and indicate favorable outcomes.

| Local token                      | Default value/Global token linked |
| -------------------------------- | --------------------------------- |
| \--fs-badge-success-bkg-color    | var(--fs-color-success-bkg)       |
| \--fs-badge-success-text-color   | var(--fs-badge-text-color)        |
| \--fs-badge-success-border-color | var(--fs-color-success-bkg)       |

### Design tokens: Highlighted

Highlighted badges draw attention with a high-contrast color scheme, which is ideal for promotions or featured items.

| Local token                          | Default value/Global token linked |
| ------------------------------------ | --------------------------------- |
| \--fs-badge-highlighted-bkg-color    | var(--fs-color-highlighted-bkg)   |
| \--fs-badge-highlighted-text-color   | var(--fs-color-highlighted-text)  |
| \--fs-badge-highlighted-border-color | var(--fs-color-highlighted-bkg)   |

### Design tokens: Info

Info badges use a blue palette to communicate neutral but helpful information, guidance, or notifications.

| Local token                   | Default value/Global token linked |
| ----------------------------- | --------------------------------- |
| \--fs-badge-info-bkg-color    | var(--fs-color-info-bkg)          |
| \--fs-badge-info-text-color   | var(--fs-color-info-text)         |
| \--fs-badge-info-border-color | var(--fs-color-info-bkg)          |

### Design tokens: Warning

Warning badges use an orange or yellow palette to signal caution, pending actions, or non-critical alerts.

| Local token                      | Default value/Global token linked |
| -------------------------------- | --------------------------------- |
| \--fs-badge-warning-bkg-color    | var(--fs-color-warning-bkg)       |
| \--fs-badge-warning-text-color   | var(--fs-color-warning-text)      |
| \--fs-badge-warning-border-color | var(--fs-color-warning-bkg)       |

### Design tokens: Danger

Danger badges use a red palette to warn users of critical errors, destructive actions, or important failures.

| Local token                     | Default value/Global token linked |
| ------------------------------- | --------------------------------- |
| \--fs-badge-danger-bkg-color    | var(--fs-color-danger-bkg)        |
| \--fs-badge-danger-text-color   | var(--fs-badge-text-color)        |
| \--fs-badge-danger-border-color | var(--fs-color-danger-bkg)        |

---

## Data attributes

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

`data-fs-badge`

`data-fs-badge-size="small" | "big"`

`data-fs-badge-variant="info" | "highlighted" | "success" | "neutral" | "warning" | "danger"`

---

## Props

| Name           | Type                    | Description                                                                                | Default   |           |          |                                  |         |
| -------------- | ----------------------- | -------------------------------------------------------------------------------------------------- | --------- | --------- | -------- | -------------------------------- | ------- |
| **testId**     | string                  | ID to find this component in testing tools (e.g.: cypress, testing library, and jest).             | fs-badge  |           |          |                                  |         |
| **size**       | "small" \| "big"        | Specifies the size variant.                                                                        | small     |           |          |                                  |         |
| **variant**    | "info" \| "highlighted" | "success"                                                                                | "neutral" | "warning" | "danger" | Specifies the component variant. | neutral |
| **counter**    | false \| true           | Enables counter badge.                                                                             | false     |           |          |                                  |         |
| **aria-label** | string                  | For accessibility purposes, adds an ARIA label to the element when \`counter\` is set to \`true\`. |           |           |          |                                  |         |

---

## Best practices

### ✅ Do's

* Place the badge next to or on top of its related item.
* Be cautious about the badge's positioning, text, shape, and color to avoid any confusion with components similar in appearance.
* Ensure sufficient text contrast against the background.

### ❌ Don'ts

* Don't use long text in badges. A reasonable character limit is 15.
* Don't label badges with active verbs.
* Don't rely on color alone to convey meaning. Ensure there is a text alternative for that meaning as well.
* Don't place badges next to buttons, as badges are not interactive and could confuse users.

---

## Related components

* 50% off
DiscountBadge
`DiscountBadge` is a badge used to show product discounts.
[See more ](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/molecules-discount-badge)

Contributors

2

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

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

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/badge.mdx)

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

Contributors

2

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

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

ON THIS PAGE

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

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

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

[Size](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23size)[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23variants)

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

[Design tokens: Big](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23design-tokens-big)[Design tokens: Neutral](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23design-tokens-neutral)[Design tokens: Success](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23design-tokens-success)[Design tokens: Highlighted](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23design-tokens-highlighted)[Design tokens: Info](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23design-tokens-info)[Design tokens: Warning](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23design-tokens-warning)[Design tokens: Danger](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23design-tokens-danger)

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

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

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

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

[Related components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%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/badge.mdx)

Copy page

On this page

ON THIS PAGE

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

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

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

[Size](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23size)[Variants](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23variants)

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

[Design tokens: Big](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23design-tokens-big)[Design tokens: Neutral](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23design-tokens-neutral)[Design tokens: Success](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23design-tokens-success)[Design tokens: Highlighted](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23design-tokens-highlighted)[Design tokens: Info](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23design-tokens-info)[Design tokens: Warning](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23design-tokens-warning)[Design tokens: Danger](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%23design-tokens-danger)

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

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

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

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

[Related components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/atoms-badge/docs/guides/faststore/atoms-badge%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 developer tools overview 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/developer-tools-overview/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/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/developer-tools-overview/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/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/developer-tools-overview/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/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/developer-tools-overview/updates/release-notes)

Storefront Development

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

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/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/developer-tools-overview/docs/guides/faststore/getting-started-overview)

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

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

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

[Configuration options for discovery.config.js](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/docs/guides/faststore/developer-tools-config-options)

[Custom Cypress integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/docs/guides/faststore/developer-tools-custom-cypress)

[FastStore CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/docs/guides/faststore/developer-tools-faststore-cli)

[Updating the @fastore/cli package version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/docs/guides/faststore/developer-tools-updating-the-cli-package-version)

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

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

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/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/developer-tools-overview/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/developer-tools-overview/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/developer-tools-overview/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

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

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

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

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

---

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

Storefront Development

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

---

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

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/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/developer-tools-overview/docs/guides/faststore/getting-started-overview)

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

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

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

[Configuration options for discovery.config.js](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/docs/guides/faststore/developer-tools-config-options)

[Custom Cypress integration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/docs/guides/faststore/developer-tools-custom-cypress)

[FastStore CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/docs/guides/faststore/developer-tools-faststore-cli)

[Updating the @fastore/cli package version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/docs/guides/faststore/developer-tools-updating-the-cli-package-version)

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

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

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

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

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

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/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/developer-tools-overview/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/developer-tools-overview/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/developer-tools-overview/docs/guides/faststore/managing-performance-overview)

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

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

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

---

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

---

(Legacy) CMS Portal

---

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

---

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

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

Developer tools

This section provides guides for tools to help you develop, test, and maintain FastStore projects. Below you’ll find an overview of the available tools and configuration options. Explore the following guides for more details on setup, usage, and best practices.

[Configuration Options for discovery.config.jsDetailed explanation of all configuration options available in the \`discovery.config.js\` file, including SEO, API, session, cart, analytics, and more.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/docs/guides/faststore/developer-tools-config-options)[Custom Cypress integrationLearn how to enable and use custom Cypress tests in your FastStore project, including experimental features and configuration.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/docs/guides/faststore/developer-tools-custom-cypress)[FastStore CLILearn how to use the FastStore CLI for building, developing, and syncing your project with Headless CMS.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/docs/guides/faststore/developer-tools-faststore-cli)[Updating the '@faststore/cli' package versionInstructions for updating the FastStore CLI package in your project.See more](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/docs/guides/faststore/developer-tools-updating-the-cli-package-version)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/_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/developer-tools/overview.mdx)

[Step 2 - Handling Dynamic Content in custom sections« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/docs/guides/faststore/dynamic-content-step-2-handling-the-dynamic-content-in-custom-sections)[Configuration options for discovery.config.jsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/docs/guides/faststore/developer-tools-config-options)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/developer-tools-overview/_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?

 Send feedback

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

Copy page

On this page

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] How do I use the VTEX tawk to app? Provide documentation and configuration details.

[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/apps/vtex.tawk-to/docs/guides)

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

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

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

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

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/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/apps/vtex.tawk-to/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/pixel-apps)

[Alexa Certify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.alexa-certify-code)

[Audara](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.audara)

[Bluecore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.bluecore)

[Blueknow app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.blueknow)

[BTG360](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.btg360)

[Cookiebot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.cookiebot)

[Cookie Script](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.cookie-script)

[CyberSource Fingerprint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.cybersource-fingerprint)

[Elfsight](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.elfsight)

[Facebook pixel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.facebook-pixel)

[Facebook Domain Verification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.facebook-domain-verification)

[Google Adwords](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.google-adwords)

[Google Customer Reviews](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.google-customer-reviews)

[Hotjar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.hotjar)

[Idea CRM](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.ideacrm)

[Iubenda](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.iubenda)

[JivoChat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.jivochat)

[Kelkoo app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.kelkoo)

[LogRocket](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.logrocket)

[Lucky Orange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.lucky-orange)

[Search Console](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.google-search-console)

[Shareasale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.shareasale)

[smarthint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.smarthint)

[Suiteshare](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.suite-share)

[Tawk.to](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.tawk-to)

[Trustpilot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.trustpilot)

[Zendesk Chat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.zendesk-chat)

[Zopim](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.zopim)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/storefront-development)

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

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/pixel-apps)

[Alexa Certify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.alexa-certify-code)

[Audara](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.audara)

[Bluecore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.bluecore)

[Blueknow app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.blueknow)

[BTG360](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.btg360)

[Cookiebot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.cookiebot)

[Cookie Script](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.cookie-script)

[CyberSource Fingerprint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.cybersource-fingerprint)

[Elfsight](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.elfsight)

[Facebook pixel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.facebook-pixel)

[Facebook Domain Verification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.facebook-domain-verification)

[Google Adwords](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.google-adwords)

[Google Customer Reviews](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.google-customer-reviews)

[Hotjar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.hotjar)

[Idea CRM](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.ideacrm)

[Iubenda](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.iubenda)

[JivoChat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.jivochat)

[Kelkoo app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.kelkoo)

[LogRocket](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.logrocket)

[Lucky Orange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.lucky-orange)

[Search Console](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.google-search-console)

[Shareasale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.shareasale)

[smarthint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.smarthint)

[Suiteshare](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.suite-share)

[Tawk.to](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.tawk-to)

[Trustpilot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.trustpilot)

[Zendesk Chat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.zendesk-chat)

[Zopim](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.zopim)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/vtex-io-deprecated-apps)

---

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

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/guides/pixel-apps)

Tawk.to

Official extension

Version: 0.2.4

Latest version: 0.2.4

[![{"base64":"  ","img":{"width":110,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square"}}](https://read.calvincode.net/reader?url=https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)

Tawk.to first party integration app. The [solution](https://read.calvincode.net/reader?url=https://www.tawk.to/) allows you to monitor and chat with the visitors on your website, mobile app or from a free customizable page.

![{"base64":"  ","img":{"width":480,"height":690,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":71321,"url":"https://user-images.githubusercontent.com/284515/86490223-043d4380-bd3d-11ea-98a5-80e6d84b44e8.png"}}](https://read.calvincode.net/reader?url=https://user-images.githubusercontent.com/284515/86490223-043d4380-bd3d-11ea-98a5-80e6d84b44e8.png)

## Configuration

It is possible to install in your store either by using App Store or the VTEX IO Toolbelt.

### Using VTEX App Store

1. Access the **Apps** section in your account's admin page and look for the Tawk.to box;
2. Then, click on the **Install** button;
3. You'll see a warning message about needing to enter the necessary configurations. Scroll down and type in your tawk.to's **Property ID**.
4. Click on **Save**.

### Using VTEX IO Toolbelt

1. In your terminal, [install](https://read.calvincode.net/reader?url=https://vtex.io/docs/recipes/development/installing-an-app/) the `vtex.tawk-to@0.x` app. You can confirm that the app has now been installed by running `vtex ls` again.
2. Access the **Apps** section in your account's admin page and look for the Tawk.to box. Once you find it, click on it.
3. Fill with your tawk.to's **Property ID**.
4. Click on **Save**.

[Suiteshare« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.suite-share)[TrustpilotNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.trustpilot)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Configuration](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.tawk-to%23configuration)

[Using VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.tawk-to%23using-vtex-app-store)[Using VTEX IO Toolbelt](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.tawk-to/docs/apps/vtex.tawk-to%23using-vtex-io-toolbelt)

Was this helpful?

[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=)