ButtonsNew

Tactile Button

A raised key with a mechanical press, a steady base, and a satisfying release.

USE IT FORForm actionsCreative portfoliosPlayful product sites

A LITTLE MORE HANDS ON06 / BUTTON STUDIES

Made to be pressed.

Press it. Feel the difference.

HOVER · FOCUS · PRESSDisabled state

Live component. Go ahead, interact.

REACT / TYPESCRIPT

'use client';

import { forwardRef, type ButtonHTMLAttributes } from 'react';
import './tactile-button.css';

export interface TactileButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}

/** A raised key with a fixed hit area and a mechanical pressed surface. */
export const TactileButton = forwardRef<HTMLButtonElement, TactileButtonProps>(
  function TactileButton({ children, className = '', type = 'button', ...props }, ref) {
    return (
      <button {...props} ref={ref} type={type} className={`ac-tactile-button ${className}`.trim()}>
        <span className="ac-tactile-button__surface">
          <span className="ac-tactile-button__label">{children}</span>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false">
            <path d="M19 5v9H5m5-5-5 5 5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </button>
    );
  },
);

Installation

Run this in your shadcn-configured React project. The component and stylesheet are added together.

TERMINAL

npx shadcn@latest add http://localhost:5173/r/tactile-button.json

This command uses the current site address. For localhost, keep this preview running on the same computer. Files follow your configured components alias.

Usage

Import the component and make the details your own.

TypeScript

'use client';

import { useState } from 'react';
import { TactileButton } from '@/components/anticraft/TactileButton';

export function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <TactileButton onClick={() => setCount(value => value + 1)}>
        Give it a push
      </TactileButton>
      <p role="status">{count ? `Demo action activated ${count} times.` : 'Try the button.'}</p>
    </div>
  );
}

Props

Prop	Type	Default	Description
`children`	`ReactNode`	`Required`	A meaningful button label. Keep children non-interactive; decorative icons should be hidden from assistive technology.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	The native button type. Set submit explicitly when the button should submit its associated form.
`disabled`	`boolean`	`false`	Disables native activation and decorative hover/pressed effects. The live demo includes a checkbox to inspect this state.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	`undefined`	Your action handler. Native keyboard and touch activation use the same handler. Buttons have no built-in navigation, payment, or form-submission action.
`className / style`	`string / CSSProperties`	`'' / undefined`	Additional classes and native inline styles. Theme with --ac-tactile-surface, --ac-tactile-ink, --ac-tactile-base, --ac-tactile-line, and --ac-tactile-radius.
`Native button props / ref`	`ButtonHTMLAttributes<HTMLButtonElement> / Ref<HTMLButtonElement>`	`undefined`	Native form, name, value, aria-, data-, event, and other button attributes pass through. A forwarded ref points to the actual button. Native disabled behavior is preserved.

Motion & accessibility

Considered by default.

A fixed base holds the click target while the raised surface moves into its pressed position. Keyboard Space and touch presses receive the same native feedback. Motion is finite and removed for prefers-reduced-motion. Every variant keeps a visible focus outline, a native button hit area of at least 44px, and a disabled state. In the demo, activation increments a clearly labeled demo counter; connect your own action in your app.

Use semantic content and meaningful labels in your composition. Check contrast and keyboard behavior with your own styles and content.

← PREVIOUSOutline Trace Button NEXT →Pricing Plans