Clickable
Interactive button 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.
- Anchor to commandcommandcommand'--auto' | '--show' | '--hide' | '--toggle''--auto' | '--show' | '--hide' | '--toggle'Default: '--auto'Default: '--auto'
Sets the action the command should take when this clickable is activated.
See the documentation of particular components for the actions they support.
--auto: a default action for the target component.--show: shows the target component.--hide: hides the target component.--toggle: toggles the target component.
- Anchor to commandForcommandForcommandForstringstring
Sets the element the commandFor should act on when this clickable is activated.
- Anchor to disableddisableddisabledbooleanbooleanDefault: falseDefault: false
Disables the chip, disallowing any interaction.
- booleanbooleanDefault: falseDefault: false
Determines whether the chip is hidden.
If this property is being set on each framework render (as in 'controlled' usage), and the chip is
removable, ensure you update app state for this property when theremoveevent fires.If the chip is not
removable, it can still be hidden by setting this property.- Anchor to hrefhrefhrefstringstring
The URL to link to.
- If set, it will navigate to the location specified by
hrefafter executing theclickevent. - If a
is set, thecommandwill be executed instead of the navigation.
- If set, it will navigate to the location specified by
- Anchor to interestForinterestForinterestForstringstring
Sets the element the interestFor should act on when this clickable is activated.
- Anchor to removableremovableremovablebooleanbooleanDefault: falseDefault: false
Whether the chip is removable.
ColorKeyword
'subdued' | 'base' | 'strong'Anchor to eventsEvents
Learn more about registering events.
- Anchor to afterhideafterhideafterhideCallbackEventListener<typeof tagName> | nullCallbackEventListener<typeof tagName> | null
- Anchor to clickclickclickCallbackEventListener<typeof tagName> | nullCallbackEventListener<typeof tagName> | null
- Anchor to removeremoveremoveCallbackEventListener<typeof tagName> | nullCallbackEventListener<typeof tagName> | null
CallbackEventListener
(EventListener & {
(event: CallbackEvent<T>): void;
}) | nullCallbackEvent
Event & {
currentTarget: HTMLElementTagNameMap[T];
}Anchor to slotsSlots
- Anchor to childrenchildrenchildrenHTMLElementHTMLElement
The content of the clickable chip.
- Anchor to graphicgraphicgraphicHTMLElementHTMLElement
The graphic to display in the clickable chip.
Only accepts
Iconcomponents.
Preview
Examples
Code
jsx
<s-clickable-chip>Clickable chip</s-clickable-chip>html
<s-clickable-chip>Clickable chip</s-clickable-chip>Basic Usage
Description
Demonstrates a simple clickable chip with a base color and interactive functionality.
jsx
<s-stack direction="inline" gap="base"> <s-clickable-chip color="base" accessibilityLabel="Filter by active products"> Active </s-clickable-chip> <s-clickable-chip color="subdued" accessibilityLabel="Filter by draft products" > Draft </s-clickable-chip> <s-clickable-chip color="strong" accessibilityLabel="Filter by archived products" > Archived </s-clickable-chip> </s-stack>html
<s-stack direction="inline" gap="base"> <s-clickable-chip color="base" accessibilityLabel="Filter by active products"> Active </s-clickable-chip> <s-clickable-chip color="subdued" accessibilityLabel="Filter by draft products" > Draft </s-clickable-chip> <s-clickable-chip color="strong" accessibilityLabel="Filter by archived products" > Archived </s-clickable-chip> </s-stack>With Icon and Remove Button
Description
Showcases a strong-colored clickable chip with a check circle icon and a removable state.
jsx
<s-clickable-chip color="strong" accessibilityLabel="Remove status filter" removable > <s-icon slot="graphic" type="check-circle" /> In progress </s-clickable-chip>html
<s-clickable-chip color="strong" accessibilityLabel="Remove status filter" removable > <s-icon slot="graphic" type="check-circle"></s-icon> In progress </s-clickable-chip>As a Link
Description
Demonstrates a subdued clickable chip configured as a link with a product icon.
jsx
<s-clickable-chip color="subdued" href="javascript:void(0)" accessibilityLabel="View T-shirt product" > <s-icon slot="graphic" type="product" /> T-shirt </s-clickable-chip>html
<s-clickable-chip color="subdued" href="javascript:void(0)" accessibilityLabel="View T-shirt product" > <s-icon slot="graphic" type="product"></s-icon> T-shirt </s-clickable-chip>Disabled State
Description
Illustrates a clickable chip in a disabled state, preventing interaction while displaying an inactive status.
jsx
<s-clickable-chip color="base" disabled accessibilityLabel="Status filter (disabled)" > Inactive </s-clickable-chip>html
<s-clickable-chip color="base" disabled accessibilityLabel="Status filter (disabled)" > Inactive </s-clickable-chip>Multiple Chips with Proper Spacing
Description
Demonstrates how multiple clickable chips with different colors, icons, and states can be arranged using an inline stack for consistent layout and spacing.
jsx
<s-stack direction="inline" gap="base"> <s-clickable-chip accessibilityLabel="Filter by status"> Active </s-clickable-chip> <s-clickable-chip color="strong" accessibilityLabel="Remove status filter" removable > <s-icon slot="graphic" type="check-circle" /> In progress </s-clickable-chip> <s-clickable-chip color="subdued" accessibilityLabel="Filter by category"> <s-icon slot="graphic" type="filter" /> Category </s-clickable-chip> </s-stack>html
<s-stack direction="inline" gap="base"> <s-clickable-chip accessibilityLabel="Filter by status"> Active </s-clickable-chip> <s-clickable-chip color="strong" accessibilityLabel="Remove status filter" removable > <s-icon slot="graphic" type="check-circle"></s-icon> In progress </s-clickable-chip> <s-clickable-chip color="subdued" accessibilityLabel="Filter by category"> <s-icon slot="graphic" type="filter"></s-icon> Category </s-clickable-chip> </s-stack>
Anchor to useful-forUseful for
- Creating interactive filters or tags that can be clicked or removed
- Navigating to related content when configured as a link
- Allowing merchants to dismiss or remove applied filters or selections
Anchor to best-practicesBest practices
- Use for interactive chips that merchants can click or dismiss
- Use Chip component instead for static, non-interactive indicators
- Keep labels short to avoid truncation
- Use color variants to indicate importance (subdued, base, strong)
- Add icons to provide visual context