Choose a version:

Clickable

A generic interactive container component that makes any content interactive and accessible via taps.

Anchor to propertiesProperties

Anchor to disabled disabled boolean: 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 id id string: A unique identifier for the element.

Was this section helpful?

Anchor to eventsEvents

Anchor to click click (event: <"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;
}

Was this section helpful?

Code

<s-clickable onClick={handleShippingSettings}>

<s-box padding="base">

<s-text>View shipping settings</s-text>

</s-box>

</s-clickable>

Clickable

Anchor to propertiesProperties

Anchor to eventsEvents

CallbackEvent

Code

Examples

Code

Default

Preview