Choose a version:

Clickable

Use Clickable to make any content interactive and accessible. Provides consistent click behavior.

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.

Was this section helpful?

Anchor to eventsEvents

Anchor to click click (event: <"s-divider">) => void

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>

<s-text>Click me</s-text>

</s-clickable>

Clickable

Anchor to propertiesProperties

Anchor to eventsEvents

CallbackEvent

Code

Examples

Code

Default

Preview