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