Bare

buttonhtmlreactvue

Live

Rendered live with React 19.2.7

bare-button.tsx

import './bare-button.css';

import type { ComponentPropsWithoutRef } from 'react';

// The React dialect over the stylesheet — same markup and class names as the html
// tab, so the design has one source and this file adds only the props.
interface BareButtonProps extends ComponentPropsWithoutRef<'button'> {
  size?: 'sm' | 'md' | 'lg';
  loading?: boolean;
}

export function BareButton({
  size = 'md',
  loading = false,
  disabled,
  children,
  ...props
}: BareButtonProps) {
  return (
    <button
      className={size === 'md' ? 'bare-btn' : `bare-btn bare-btn--${size}`}
      type="button"
      disabled={disabled || loading}
      aria-busy={loading || undefined}
      {...props}
    >
      {loading && <span className="bare-btn__spinner" aria-hidden="true" />}
      <span className="bare-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.

The one to take when you are about to draw your own. It is not undesigned — it is pre-designed: the sizes are settled, focus is visible, disabled reads as disabled and not merely faded, loading keeps the label and stops the second press, and both light and dark grounds are already answered. What is left is colour.

It assumes nothing about the page it lands on. No reset, no normalize, no design tokens, no build step — the stylesheet starts by resetting the one element it styles, and every value in it is either literal or a custom property the same file defines.