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';




  • 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"

altitude string

variant string

colorMode string


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

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

themeKey string


This is a clickable
Copyright © 2020 Jake Moxey