Clickable
The Clickable component makes any content interactive. Use it to add click interactions to non-interactive elements while maintaining full control over their visual presentation.
Unlike the Button component, Clickable doesn't impose visual styling, allowing you to create custom interactive elements. You must implement focus indicators and other visual cues yourself.
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Supported targets
- pos.
cart. line-item-details. action. render - pos.
customer-details. action. render - pos.
draft-order-details. action. render - pos.
exchange. post. action. render - pos.
home. modal. render - pos.
order-details. action. render - pos.
product-details. action. render - pos.
purchase. post. action. render - pos.
register-details. action. render - pos.
return. post. action. render
Use cases
- Interactive cards: Create custom cards that respond to clicks without button styling.
- Clickable elements: Make text, images, or icons clickable while preserving visual appearance.
- Complex layouts: Build interactive layouts with multiple clickable regions.
- Custom interfaces: Implement selection interfaces, galleries, or navigation with tailored designs.
Anchor to examplesExamples
Anchor to example-make-content-clickableMake content clickable
Make any content interactive using a Clickable component wrapper without imposing visual styling. This example shows how to create custom interactive elements while maintaining full control over appearance.
Make content clickable
Make content clickable
Examples
Make content clickable
Description
Make any content interactive using a `Clickable` component wrapper without imposing visual styling. This example shows how to create custom interactive elements while maintaining full control over appearance.
Default
<s-clickable onClick={handleShippingSettings}> <s-box padding="base"> <s-text>View shipping settings</s-text> </s-box> </s-clickable>
Anchor to propertiesProperties
Configure the following properties on the Clickable component.
- Anchor to disableddisableddisabledbooleanboolean
Disables the clickable, meaning it cannot be clicked or receive focus.
In this state, onClick will not fire. If the click event originates from a child element, the event will immediately stop propagating from this element.
However, items within the clickable can still receive focus and be interacted with.
This has no impact on the visual state by default, but developers are encouraged to style the clickable accordingly.
- Anchor to idididstringstring
A unique identifier for the element.
Anchor to eventsEvents
The Clickable component provides event callbacks for handling user interactions. Learn more about handling events.
- Anchor to clickclickclick(event: CallbackEvent<"s-clickable">) => void(event: CallbackEvent<"s-clickable">) => void
Callback when the element is activated.
CallbackEvent
- bubbles
boolean - cancelable
boolean - composed
boolean - currentTarget
HTMLElementTagNameMap[T] - detail
any - eventPhase
number - target
HTMLElementTagNameMap[T] | null
interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
currentTarget: HTMLElementTagNameMap[T];
bubbles?: boolean;
cancelable?: boolean;
composed?: boolean;
detail?: any;
eventPhase: number;
target: HTMLElementTagNameMap[T] | null;
}Anchor to best-practicesBest practices
- Implement visual feedback: Since
Clickablehas no built-in styling, add focus indicators and active states to show interactivity. - Wrap non-interactive elements: Use
Clickablefor text, images, or icons. Avoid wrapping components with built-in interactions. - Handle disabled state carefully: When
disabled, child elements can still receive focus. Provide visual feedback for the non-interactive state.
Anchor to limitationsLimitations
The component doesn't automatically provide keyboard navigation support beyond basic click functionality.