Actionable

Low-level utility for creating interactive elements.

Import

import { Actionable } from "reshaped";
import type { ActionableProps } from "reshaped";

Related components

Storybook


<Actionable onClick={(event) => console.log(event)}>Action</Actionable>

Usage

Actionable utility handles decisions for building buttons, links, or other interactive elements. It renders the correct HTML tag based on the provided props and manages various states of interactive elements.

Try clicking the component, 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 by either a mouse or keyboard event.

Using as a link

When href is passed to the component, it will automatically turn Actionable into an <a> tag. It can 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>

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 with the keyboard.
When used with only the href property, it's rendered as a link and supports the Enter keyboard event.
When used with the onClick handler or with attributes={{ role: 'button' }}, it's rendered as a button and supports both the Space and Enter keyboard events.

Accordion

Container