---
name: "[up-clickable]"
area: "API"
kind: "HTML attribute"
parent: "up.link module"
visibility: "experimental"
url: "https://unpoly.com/api/up-clickable"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.link module](https://unpoly.com/api/up.link.md)</nav>

# [up-clickable]

**This feature is experimental**. Please [share](https://github.com/unpoly/unpoly/discussions) your experiences so we know what to keep or change.

Enables [keyboard interaction and other accessibility behaviors](https://unpoly.com/learn/faux-interactive-elements.md#accessibility) for non-interactive elements that represent clickable buttons.

It's up to you to make the element appear interactive visually, e.g., by assigning a `.button` class from your design system.

<nav aria-label="Guides">

- [Learn: Elements that act like links or buttons](https://unpoly.com/learn/faux-interactive-elements.md)

</nav>

<nav aria-label="Contents">

#### Contents

- [Example](#example)
- [Act on press](#act-on-press)
- [Unobtrusive use](#unobtrusive-use)
- [Modifying attributes](#attributes)

</nav>

## Example {#example}

Add the `[up-clickable]` attribute to a non-interactive element, like a `<span>`:

```html
<span id="faux-button" up-clickable>Click me</span>
```

To react to the element's activation, handle the [`up:click`](https://unpoly.com/api/up:click.md) event:

```js
let button = document.querySelector('#faux-button')

button.addEventListener('up:click', function(event) {
  console.log('Click on faux button!')
})
```

## Act on press {#act-on-press}

To activate the element on `mousedown` instead of `click`, also set an [`[up-instant]`](https://unpoly.com/api/up-instant.md) attribute:

```html
<span id="faux-button" up-clickable up-instant>Click me</span>
```

## Unobtrusive use {#unobtrusive-use}

To make elements clickable without an explicit `[up-clickable]` attribute, configure [`up.link.config.clickableSelectors`](https://unpoly.com/api/up.link.config.md#config.clickableSelectors):

```js
up.link.config.clickableSelectors.push('.button')
```

Any matching element will now gain [keyboard interaction and other accessibility behaviors](https://unpoly.com/learn/faux-interactive-elements.md#accessibility):

```html
<span class="button">I can be used with the keyboard</span>
```

---

## Modifying attributes {#attributes}

### [up-instant] {#up-instant}

(optional)

Whether this element is activated on `mousedown` instead of waiting for `click`.