Actionable
Actionable is a low level utility for creating interactive elements.

Most of the time you need more high-level components like Button, Link or MenuItem.

Usage

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.

Accessibility

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.

Properties

Base properties:

NameTypeDefaultRequiredComment
childrenReact.ReactNode-false
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:

NameTypeDefaultRequiredComment
hrefstring-false

Button properties, when Actionable is used without href property:

NameTypeDefaultRequiredComment
typebutton, submit, resetbuttonfalseButton type attribute
disabledboolean-false