The <Clickable> component is a utility component that implements all the interactions an interactive element needs to be fully accessible when it's not rendered as its respective native element. It is an export of Reakit's Clickable


import { Clickable } from 'bumbag';


Editable example



  • Pressing the Enter or Space keys triggers the button.
  • Clickable extends the accessibility features of Tabbable.


#Clickable Props

disabled boolean

Same as the HTML attribute.

focusable boolean

When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.

Inherits Box props


  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string


  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string


  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;

elementRef ((instance: any) => void) | RefObject<any>

themeKey string


This is a clickable
On this page
Copyright © 2021 Jake Moxey