Skip to main content

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 can include icons to provide additional visual context. For system-generated status indicators, use badge. For interactive or removable chips, use clickable chip.

Support
Targets (24)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the chip component.

Anchor to accessibilityLabel
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.

Anchor to id
id
string

A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Anchor to SlotsSlots

The chip component supports slots for additional content placement within the component. Learn more about using slots.

Anchor to graphic
graphic
HTMLElement

An optional graphic displayed at the start of the chip, such as an icon to visually reinforce the chip's label. Only the s-icon element and its type attribute are supported.

Anchor to ExamplesExamples

Anchor to Display a basic chipDisplay a basic chip

Highlight a short piece of information with a styled tag. This example renders an s-chip containing a "50% OFF" promotional label.

Display a basic chip

A small rounded label element displaying categorization or status text.

html

<s-chip accessibilityLabel="Promotional offer">50% OFF</s-chip>

Anchor to Pair an icon with a screen reader labelPair an icon with a screen reader label

Add an icon when the chip text alone doesn't convey the full meaning. This example pairs the graphic slot with s-icon and sets accessibilityLabel for clearer context.

html

<s-chip accessibilityLabel="Carbon neutral shipping">
<s-icon slot="graphic" type="check"></s-icon>
Carbon neutral
</s-chip>

Anchor to Group product tags in an inline layoutGroup product tags in an inline layout

Display multiple product attributes as a row of chips. This example uses s-stack with direction="inline" to arrange three s-chip elements side by side.

html

<s-stack direction="inline" gap="small">
<s-chip>Organic</s-chip>
<s-chip>Best Seller</s-chip>
<s-chip>Limited Edition</s-chip>
</s-stack>

Anchor to Best practicesBest practices

  • Keep labels concise: Use one to three words per chip so the label remains scannable at a glance.
  • Pair icons with labels: When adding an icon using the graphic slot, also set accessibilityLabel so screen readers convey the full meaning.
  • Avoid crowding the layout: Limit chips to meaningful labels like status or category — too many chips make the page harder to scan.
Was this page helpful?