Actionable

Automatically resolves to correct HTML tag
Full keyboard navigation
Highly customizable and has no default visual styles
Similar components:
Button
Link
Menu Item


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 on the next one:

Remember that the onClick handler is 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 attribute 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 when you're navigating to it with the keyboard.

When used only with the href property - it's rendered as a link and supports the 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:

Name
Type
children
React.ReactNode
onClick
(event) => {}
fullWidth
boolean
insetFocus
boolean
borderRadius
inherit
as
string
className
Array<
string
undefined
null
false
>
attributes
object

Link properties, when Actionable is used with href property:

Name
Type
href
string

Button properties, when Actionable is used without href property:

Name
Type
type
button
submit
reset
disabled
boolean