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 accessibilityLabelaccessibilityLabelstring
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 colorcolorColorKeyword
Modify the color to be more or less intense.
- Anchor to disableddisabledboolean
Disables the chip, disallowing any interaction.
- boolean
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 hrefhrefstring
The URL to link to.
- If set, it will navigate to the location specified by
hrefafter executing theclickevent.
- If set, it will navigate to the location specified by
- Anchor to removableremovableboolean
Whether the chip is removable.
ColorKeyword
'subdued' | 'base' | 'strong'Anchor to eventsEvents
Learn more about registering events.
- Anchor to afterhideafterhideCallbackEventListener<typeof tagName> | null
- Anchor to clickclickCallbackEventListener<typeof tagName> | null
- Anchor to removeremoveCallbackEventListener<typeof tagName> | null
CallbackEventListener
(EventListener & {
(event: CallbackEvent<T>): void;
}) | nullCallbackEvent
Event & {
currentTarget: HTMLElementTagNameMap[T];
}Code
Examples
Code
Default
<s-clickable-chip>Clickable chip</s-clickable-chip>