Actionable

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:

<View direction="row" gap={3}>
  <Actionable onClick={(event) => console.log(event)}>Click me</Actionable>
  <Actionable onClick={() => {}}>Focus me</Actionable>
</View>

Remember that the onClick handler is triggered with either mouse or keyboard event.

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.

<Actionable href="#">Navigate to the top</Actionable>

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.

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.