Clickable component that enables nesting other button and anchor elements. a11y compliant.

Usage no npm install needed!

<script type="module">
  import reactClickable from '';



Clickable and Accessible (a11y) React components with zero configuration. Nesting supported. Check out the demo.


  • Clickable - accessible clickable component
  • StopPropagation - stops event propagation to make a child of Clickable unclickable

:warning: Although this is considered bad practice in UI design, there are exceptions wherein accessible clickable component comes in handy. Nevertheless, please reconsider if this is the right way to implement what you want.


npm install --save react-clickable


:heavy_exclamation_mark: When nesting interactive elements, make sure to stop event propagation.

import React, {Component} from 'react';
import { Clickable, StopPropagation } from 'react-clickable';

class Item extends Component {
  state = { showModal: false };

  onSelect () {
    console.log('Item selected!');

  showTooltip (e) {

    console.log('Showing tooltip...');

  showModal() {
    this.setState(state => ({
      showModal: !state.showModal

  render () {
    <Clickable onClick={this.onSelect}>
      <div>Some clickable content!</div>
        onClick={this.showTooltip} />

Clickable props

Property Type Description Default
onClick Function Event handler for Clickable's' onClick event -
onMouseDown Function Event handler for Clickable's' onmouseDown event -
onKeyDown Function Custom event handler called on Enter or Space key press, when Clickable component is focused. When not provided, the first callback available among props.onClick and props.onMouseDown will be called. -
ariaLabel String Accessible name for Clickable component -
role String ARIA role assigned to rendered div "button"
tabIndex Number tabIndex assigned to rendered div 0

At least one among onClick or onMouseDown callback must be mandatorily declared.

Any other property will be forwarded to the rendered div.

StopPropagation props

Property Type Description Default
children Node Elements rendered inside StopPropagation. -
className String CSS class for rendered div -


If you find something missing or not working properly feel free to contribute or open an issue.




Thanks to you all (emoji key):

Miro Dojkic

💻 💬 📖 💡 🤔 🚇 👀 ⚠️

Andrea Carraro

💻 📖 🤔 🚇 ⚠️