@kenos-ui/react-button

An augmented native <button> primitive. Built with native-first press logic, keyboard support, robust state-driven data attributes, and a focus-visible polyfill. Zero CSS shipped.

Features

• Native-first use-press logic that replicates browser interactions.
• Provides logical focus and pointer-aware states like hovered and pressed.
• Fully accessible, managing disabled and pending states natively.
• First-class DOM rendering composition via the render prop.
• Zero CSS shipped — target semantic data-attributes to style.

Accessibility

Kenos enhances the native button accessibility. Roles, labels, and state management (like pending/disabled) are handled for you natively via aria-disabled and aria-busy.

Roles and attributes

| Part | Role / Attributes | | :----- | :---------------- | | Button | button |

Keyboard support

| Key | Description | | :------ | :---------------------------------------------------------- | | Enter | Activates the button. | | Space | Activates the button. Prevents page scrolling when pressed. |

Usage

import { Button } from "@kenos-ui/react-button";

export function Example() {
  return <Button isPending={false}>Click me</Button>;
}

Advanced Behaviors

The button intentionally avoids "magic props" for complex behaviors. Instead, we export specialized hooks that you can compose manually. This keeps the component API lean while giving you full control over when and how these effects trigger.

Available hooks:

• useHaptics
• useLongPress
• useHover
• usePointerPressure

Example: Haptic Feedback

Use composeEventHandlers to merge the haptic trigger with your own event handlers.

import { Button, useHaptics, composeEventHandlers } from "@kenos-ui/react-button";

export function HapticButton({ onSave }) {
  const haptic = useHaptics();

  return (
    <Button onClick={composeEventHandlers(() => haptic.trigger("save"), onSave)}>
      Save with Haptics
    </Button>
  );
}

API Reference

Props and data attributes. Import from @kenos-ui/react-button.

Root props

• isPending (boolean, default: false) Loading state. Maintains focusability, blocks action, announces via aria-busy.

• isDisabled (boolean, default: false) Semantic equivalent to disabled, explicitly named for intent clarity. Uses aria-disabled internally.

• excludeFromTabOrder (boolean, default: false) Removes from tab order without using native disabled.

• preventFocusOnPress (boolean, default: false) Prevents focus from moving to the button on press (mouse/touch).

• render (DOMRenderFunction) Replaces the rendered DOM element, keeping behavior and props.

Data attributes

| Attribute | On part | Description | | :---------------- | :------ | :----------------------------------------------------- | | [data-hovered] | Button | Present when the button is hovered with mouse. | | [data-pressed] | Button | Present when the button is actively pressed. | | [data-focused] | Button | Present when the button has logical focus. | | [data-pending] | Button | Present when the button is in a pending/loading state. | | [data-disabled] | Button | Present when the button is semantically disabled. | | [data-kenos] | Button | Stable Kenos UI fingerprint ("button"). |