ButtonsNew

Outline Trace Button

A fine accent line draws around a restrained button, with a quiet arrow lift.

USE IT FORDark hero sectionsTechnical portfoliosSecondary actions

ATTENTION TO THE FINER DETAILS05 / BUTTON STUDIES

Follow the feeling.

A line that finishes the thought.

HOVER · FOCUS · PRESSDisabled state

Live component. Go ahead, interact.

REACT / TYPESCRIPT

'use client';

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

export interface OutlineTraceButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}

/** A quiet outline that draws around a stable, native button. */
export const OutlineTraceButton = forwardRef<HTMLButtonElement, OutlineTraceButtonProps>(
  function OutlineTraceButton({ children, className = '', type = 'button', ...props }, ref) {
    return (
      <button
        {...props}
        ref={ref}
        type={type}
        className={`ac-outline-trace-button ${className}`.trim()}
      >
        <svg className="ac-outline-trace-button__line" aria-hidden="true" focusable="false">
          <rect x="1" y="1" pathLength="100" />
        </svg>
        <span className="ac-outline-trace-button__label">{children}</span>
        <span className="ac-outline-trace-button__mark" aria-hidden="true">↗</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/outline-trace-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 { OutlineTraceButton } from '@/components/anticraft/OutlineTraceButton';

export function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <OutlineTraceButton onClick={() => setCount(value => value + 1)}>
        Explore the details
      </OutlineTraceButton>
      <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-trace-surface, --ac-trace-ink, --ac-trace-accent, --ac-trace-line, and --ac-trace-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 decorative SVG border draws once around the button on fine-pointer hover or visible keyboard focus. The arrow lifts slightly; there is no looping animation. 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.

← PREVIOUSShutter Button NEXT →Tactile Button