---
title: Chip
description: >-
  The chip component displays static labels, categories, or attributes that help
  classify and organize content. Use chip to show product tags, categories, or
  metadata near the items they describe, helping users identify items with
  similar properties.


  Chips support multiple visual variants for different levels of emphasis and
  can include icons to provide additional visual context. For system-generated
  status indicators, use
  [badge](/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/feedback-and-status-indicators/badge).
  For interactive or removable chips, use [clickable
  chip](/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/actions/clickable-chip).
api_version: 2026-01
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/typography-and-content/chip
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/typography-and-content/chip.md
---

# Chip

The chip component displays static labels, categories, or attributes that help classify and organize content. Use chip to show product tags, categories, or metadata near the items they describe, helping users identify items with similar properties.

Chips support multiple visual variants for different levels of emphasis and can include icons to provide additional visual context. For system-generated status indicators, use [badge](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/feedback-and-status-indicators/badge). For interactive or removable chips, use [clickable chip](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/polaris-web-components/actions/clickable-chip).

## Properties

* **accessibilityLabel**

  **string**

  A label that describes the purpose or contents of the Chip. It will be read to users using assistive technologies such as screen readers.

* **id**

  **string**

  A unique identifier for the element.

## Slots

Learn more about [component slots](https://shopify.dev/docs/api/checkout-ui-extensions/2026-01/using-polaris-components#slots).

* **graphic**

  **HTMLElement**

  The graphic to display inside of the chip.

  Only `s-icon` element and its `type` attribute are supported.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/chip-default-CqJC596o.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-chip>50% OFF</s-chip>
  ```