Skip to main content
PROYECTOVIVIANA

createButton

Provides the behavior and accessibility implementation for a button component. Use this hook when you need full control over the button's appearance while maintaining proper accessibility.

Import

import { createButton } from '@proyecto-viviana/solidaria';

Usage

function CustomButton(props) {
  const { buttonProps, isPressed } = createButton({
    onPress: props.onPress,
    isDisabled: props.isDisabled,
  });

  return (
    <button
      {...buttonProps}
      class={isPressed() ? 'pressed' : ''}
    >
      {props.children}
    </button>
  );
}

Custom Styled Button

Build a button with custom styling while maintaining accessibility.

Status: Not pressed yet

function GradientButton(props) {
  const { buttonProps, isPressed } = createButton({
    onPress: props.onPress,
  });

  return (
    <button
      {...buttonProps}
      class={`gradient-btn ${isPressed() ? 'scale-95' : ''}`}
    >
      {props.children}
    </button>
  );
}

Button as Link

Create an accessible link that looks like a button.

function ButtonLink(props) {
  const { buttonProps } = createButton({
    elementType: 'a',
  });

  return (
    <a {...buttonProps} href={props.href}>
      {props.children}
    </a>
  );
}

Parameters

Props

PropTypeDefaultDescription
onPress(e: PressEvent) => void—Handler called when the button is pressed
onPressStart(e: PressEvent) => void—Handler called when press starts
onPressEnd(e: PressEvent) => void—Handler called when press ends
onPressChange(isPressed: boolean) => void—Handler called when pressed state changes
onPressUp(e: PressEvent) => void—Handler called when pointer is released
isDisabledbooleanfalseWhether the button is disabled
elementType'button' | 'a' | 'div' | 'span''button'The HTML element to render as
type'button' | 'submit' | 'reset''button'The button type (for form submission)
hrefstring—URL for link buttons
targetstring—Link target (_blank, _self, etc.)
excludeFromTabOrderbooleanfalseRemove from tab order

Return Value

Props

PropTypeDefaultDescription
buttonPropsJSX.HTMLAttributes—Props to spread on the button element
isPressedAccessor<boolean>—Signal indicating if button is currently pressed

Accessibility

  • Handles role="button" when using non-button elements
  • Manages tabIndex for keyboard accessibility
  • Handles Enter and Space key presses
  • Sets aria-disabled for disabled state
  • Normalizes press events across mouse, touch, and keyboard
  • Prevents default behavior for non-native buttons