Clickable#

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#

import { Clickable } from 'bumbag';

Usage#

Editable example

<Set>
  <Clickable
    use={Button}
    onClick={() => alert('Clicked')}
  >
    Clickable
  </Clickable>
  <Clickable
    use={Button}
    disabled
    onClick={() => alert('Clicked')}
  >
    Clickable
  </Clickable>
  <Clickable
    use={Button}
    disabled
    focusable
    onClick={() => alert('Clicked')}
  >
    Clickable
  </Clickable>
</Set>

<Set>
  <Clickable
    use={Button}
    onClick={() => alert('Clicked')}
  >
    Clickable
  </Clickable>
  <Clickable
    use={Button}
    disabled
    onClick={() => alert('Clicked')}
  >
    Clickable
  </Clickable>
  <Clickable
    use={Button}
    disabled
    focusable
    onClick={() => alert('Clicked')}
  >
    Clickable
  </Clickable>
</Set>

Accessibility#

Patterns#

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

Props#

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

use

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

className string

children

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

overrides

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

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

themeKey string

Theming#

Clickable.styles.base

This is a clickable

On this page