Skip to main content

ClickableChip

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 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 disabled
disabled
boolean
Default: false

Disables the chip, disallowing any interaction.

Anchor to hidden
hidden
boolean
Default: 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 the remove event fires.

If the chip is not removable, it can still be hidden by setting this property.

Anchor to href
href
string

The URL to link to.

  • If set, it will navigate to the location specified by href after executing the click event.
Anchor to id
id
string

A unique identifier for the element.

Anchor to removable
removable
boolean
Default: false

Whether the chip is removable.

Was this section helpful?

Anchor to eventsEvents

Learn more about registering events.

Anchor to afterhide
afterhide
<typeof tagName>

Event handler when the chip has fully hidden.

The hidden property will be true when this event fires.

Anchor to click
click
<typeof tagName>

Event handler when the chip is clicked.

Anchor to remove
remove
<typeof tagName>

Event handler when the chip is removed.

Was this section helpful?

Anchor to slotsSlots

Learn more about component slots.

Anchor to graphic
graphic
HTMLElement

The graphic to display inside of the chip.

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

Was this section helpful?

Code

<s-clickable-chip removable>Shipping insurance</s-clickable-chip>

Preview