npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@solid-aria/button

v0.1.3

Published

Primitives for building accessible button component.

Downloads

5,108

Readme

@solid-aria/button

pnpm turborepo size version stage

Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.

Installation

npm install @solid-aria/button
# or
yarn add @solid-aria/button
# or
pnpm add @solid-aria/button

createButton

Provides the behavior and accessibility implementation for a button component. Handles mouse, keyboard, and touch interactions, focus behavior, and ARIA props for both native button elements and custom element types.

Features

On the surface, building a custom styled button seems simple. However, there are many cross browser inconsistencies in interactions and accessibility features to consider. createButton handles all of these interactions for you, so you can focus on the styling.

  • Native HTML <button> support
  • <a> and custom element type support via ARIA
  • Mouse and touch event handling, and press state management
  • Keyboard focus management and cross browser normalization
  • Keyboard event support for Space and Enter keys

How to use it

By default, createButton assumes that you are using it with a native <button> element.

import { AriaButtonProps, createButton } from "@solid-aria/button";

function Button(props: AriaButtonProps) {
  let ref: HTMLButtonElement | undefined;

  const { buttonProps } = createButton(props, () => ref);

  return (
    <button {...buttonProps} ref={ref}>
      {props.children}
    </button>
  );
}

function App() {
  return <Button onPress={() => alert("Button pressed!")}>Test</Button>;
}

Using a custom element type

Sometimes you might need to use an element other than a native <button>. createButton supports this via the elementType prop. When used with an element other than a native button, createButton automatically applies the necessary ARIA roles and attributes to ensure that the element is exposed to assistive technology as a button.

In addition, this example shows usage of the isPressed value returned by createButton to properly style the button's active state. You could use the CSS :active pseudo class for this, but isPressed properly handles when the user drags their pointer off of the button, along with keyboard support and better touch screen support.

import { AriaButtonProps, createButton } from "@solid-aria/button";
import { mergeProps } from "solid-js";

function Button(props: AriaButtonProps<"span">) {
  let ref: HTMLButtonElement | undefined;

  const createButtonProps = mergeProps({ elementType: "span" }, props);

  const { buttonProps, isPressed } = createButton(createButtonProps, () => ref);

  return (
    <span
      {...buttonProps}
      style={{
        background: isPressed() ? "darkgreen" : "green",
        color: "white",
        padding: "10px",
        cursor: "pointer",
        "user-select": "none",
        "-webkit-user-select": "none"
      }}
      ref={ref}
    >
      {props.children}
    </span>
  );
}

function App() {
  return <Button onPress={() => alert("Button pressed!")}>Test</Button>;
}

createToggleButton

Provides the behavior and accessibility implementation for a toggle button component. ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes.

Features

Toggle buttons are similar to action buttons, but support an additional selection state that is toggled when a user presses the button. There is no built-in HTML element that represents a toggle button, so Solid Aria implements it using ARIA attributes.

  • Native HTML <button>, <a>, and custom element type support
  • Exposed as a toggle button via ARIA
  • Mouse and touch event handling, and press state management
  • Keyboard focus management and cross browser normalization
  • Keyboard event support for Space and Enter keys

How to use it

By default, createToggleButton assumes that you are using it with a native <button> element. You can use a custom element type by passing the elementType prop to createToggleButton. See the createButton docs for an example of this.

The following example shows how to use the createToggleButton to build a toggle button. The toggle state is used to switch between a green and blue background when unselected and selected respectively. In addition, the isPressed state is used to adjust the background to be darker when the user presses down on the button.

import { AriaToggleButtonProps, createToggleButton } from "@solid-aria/button";

function ToggleButton(props: AriaToggleButtonProps) {
  let ref: HTMLButtonElement | undefined;

  const { buttonProps, isPressed, state } = createToggleButton(props, () => ref);

  return (
    <button
      {...buttonProps}
      style={{
        background: isPressed()
          ? state.isSelected()
            ? "darkblue"
            : "darkgreen"
          : state.isSelected()
          ? "blue"
          : "green",
        color: "white",
        padding: "10px",
        cursor: "pointer",
        "user-select": "none",
        "-webkit-user-select": "none",
        border: "none"
      }}
      ref={ref}
    >
      {props.children}
    </button>
  );
}

function App() {
  return <ToggleButton>Test</ToggleButton>;
}

Changelog

All notable changes are described in the CHANGELOG.md file.