Chip
Represents a set of user-supplied keywords that help label, organize, and categorize objects. Used to categorize or highlight content attributes. They are often displayed near the content they classify, enhancing discoverability by allowing users to identify items with similar properties.
Anchor to propertiesProperties
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstring
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 colorcolorcolorColorKeywordColorKeywordDefault: 'base'Default: 'base'
Modify the color to be more or less intense.
ColorKeyword
'subdued' | 'base' | 'strong'Anchor to slotsSlots
- Anchor to childrenchildrenchildrenHTMLElementHTMLElement
The content of the Chip.
- Anchor to graphicgraphicgraphicHTMLElementHTMLElement
The graphic to display in the chip.
Only accepts
Iconcomponents.
Examples
<s-chip>Chip</s-chip>
Preview
Examples
Code
jsx
<s-chip>Chip</s-chip>html
<s-chip>Chip</s-chip>Basic usage
Description
Simple chip displaying product status without an icon.
jsx
<s-chip color="base" accessibilityLabel="Product status indicator"> Active </s-chip>html
<s-chip color="base" accessibilityLabel="Product status indicator"> Active </s-chip>With icon graphic
Description
Chip enhanced with an icon to provide visual context for the category.
jsx
<s-chip color="strong" accessibilityLabel="Product category"> <s-icon slot="graphic" type="catalog-product" size="small" /> Electronics </s-chip>html
<s-chip color="strong" accessibilityLabel="Product category"> <s-icon slot="graphic" type="catalog-product" size="small"></s-icon> Electronics </s-chip>Color variants
Description
Demonstrates all three color variants for different levels of visual emphasis.
jsx
<s-stack direction="inline" gap="base"> <s-chip color="subdued" accessibilityLabel="Secondary information"> Draft </s-chip> <s-chip color="base" accessibilityLabel="Standard information"> Published </s-chip> <s-chip color="strong" accessibilityLabel="Important status"> <s-icon slot="graphic" type="check" size="small" /> Verified </s-chip> </s-stack>html
<s-stack direction="inline" gap="base"> <s-chip color="subdued" accessibilityLabel="Secondary information"> Draft </s-chip> <s-chip color="base" accessibilityLabel="Standard information"> Published </s-chip> <s-chip color="strong" accessibilityLabel="Important status"> <s-icon slot="graphic" type="check" size="small"></s-icon> Verified </s-chip> </s-stack>Product status
Description
Common status indicators demonstrating chips in real-world product management scenarios.
jsx
<s-stack direction="inline" gap="base"> <s-chip color="base" accessibilityLabel="Product status"> Active </s-chip> <s-chip color="subdued" accessibilityLabel="Product status"> Draft </s-chip> <s-chip color="strong" accessibilityLabel="Product status"> <s-icon slot="graphic" type="check" size="small" /> Published </s-chip> </s-stack>html
<s-stack direction="inline" gap="base"> <s-chip color="base" accessibilityLabel="Product status">Active</s-chip> <s-chip color="subdued" accessibilityLabel="Product status">Draft</s-chip> <s-chip color="strong" accessibilityLabel="Product status"> <s-icon slot="graphic" type="check" size="small"></s-icon> Published </s-chip> </s-stack>Text truncation
Description
Demonstrates automatic text truncation for long content within a constrained width.
jsx
<s-box maxInlineSize="200px"> <s-stack gap="base"> <s-chip color="base" accessibilityLabel="Long product name"> This is a very long product name that will be truncated with ellipsis when it exceeds the container width </s-chip> <s-chip color="strong" accessibilityLabel="Long category name"> <s-icon slot="graphic" type="catalog-product" size="small" /> Electronics and computer accessories category with extended description </s-chip> </s-stack> </s-box>html
<s-box maxInlineSize="200px"> <s-stack gap="base"> <s-chip color="base" accessibilityLabel="Long product name"> This is a very long product name that will be truncated with ellipsis when it exceeds the container width </s-chip> <s-chip color="strong" accessibilityLabel="Long category name"> <s-icon slot="graphic" type="catalog-product" size="small"></s-icon> Electronics and computer accessories category with extended description </s-chip> </s-stack> </s-box>
Anchor to useful-forUseful for
- Labeling, organizing, and categorizing objects
- Highlighting content attributes
- Enhancing discoverability by identifying items with similar properties
Anchor to best-practicesBest practices
subdued: use for secondary or less important informationbase: use as default colorstrong: use for important or verified status- Text truncates automatically, keep labels short to avoid truncation
- Chips are static indicators, not interactive or dismissible. For interactive chips, use ClickableChip
- Add icons to
graphicslot to provide visual context - Display chips near the content they classify
Anchor to content-guidelinesContent guidelines
Chip labels should:
- Be short and concise to avoid truncation
- Use
to describe purpose for screen readers - Common status labels:
Active,Draft,Published,Verified - Common category labels:
Product type,Collection,Tag name
Was this page helpful?