Actionable is a low level utility for creating interactive elements.
Automatically resolves to correct HTML tag
Full keyboard navigation
Highly customizable and has no default visual styles
Similar components:
ButtonLinkMenu Item


Actionable utility takes care of the decisions you have to make when building buttons, links or any other interactive elements. It renders the correct HTML tag based on the passed props and handles a variety of states interactive elements may have.

Try clicking the component and then press Tab to focus the next one:

Keep in mind, that onClick handler may be triggered with either mouse or keyboard event.

Used as a link

When href is passed to the component - it will automatically turn Actionable into an <a> tag. It may still receive onClick like in the button example which will prevent the default event behavior in that case.

Note: Don't use disabled or type props when rendering Actionable as a link. Native html links can't be disabled and their href will work before JS has loaded even if you use preventDefault() in the handler.


Actionable automatically handles its focused state and shows it only for when you're navigating to it with keyboard.

When used with just href - it's rendered as a link and supports Enter keyboard event. When used with onClick handler or with attributes={{ role: 'button' }} - it's rendered as a button and supports both, Space and Enter keyboard events.


Base properties:

asstring-falseCustom tag name for the root element
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element
onClick(e) => {}-false

Link properties, when Actionable is used with href property:


Button properties, when Actionable is used without href property:

typebutton, submit, resetbuttonfalseButton type attribute