Drafted

buttonhtmlreactvue

Live

Rendered live with React 19.2.7

drafted-button.tsx

import './drafted-button.css';

import type { ComponentPropsWithoutRef } from 'react';

// The React dialect over the stylesheet — same markup and class names as the html
// tab. The four registration marks are pseudo-elements, so there is nothing to
// render for them here: two live on the button, two on the label span.
interface DraftedButtonProps extends ComponentPropsWithoutRef<'button'> {
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
}

export function DraftedButton({
  size = 'md',
  loading = false,
  disabled,
  children,
  ...props
}: DraftedButtonProps) {
  return (
    <button
      className={size === 'md' ? 'draft-btn' : `draft-btn draft-btn--${size}`}
      type="button"
      disabled={disabled || loading}
      aria-busy={loading || undefined}
      {...props}
    >
      {loading && <span className="draft-btn__spinner" aria-hidden="true" />}
      <span className="draft-btn__label">{children}</span>
    </button>
  );
}

dependencies

react@19.2.7the dialect you are reading

Built on Astro: the stage mounts the exhibit's actual React or Vue file as a live island. Pick the framework and the stage, the code and the dependency list agree.

None of this is @eakz/ui's Button. The pack's Button is exhibited elsewhere, extracted from the repo; this one was authored for the showcase, ships in no package, and reimplements nothing. Square corners where that one is rounded, so the two can never be mistaken for each other.

A button that says what it is about to do. At rest it is a plan: a thin outline. Point at it and four registration marks close in around its corners from a 4px outset, the outline warms and the label opens up — the plan is being drafted. Press it and the whole thing commits at once, with no animation, because a commit is not a transition.

The marks are pseudo-elements, two on the button and two on the label span: a corner bracket is one box with two borders, so four brackets need no elements of their own.