Overview

<link rel="stylesheet" href="design/css/classic/index.css">

<button class="qf-button" data-variant="contained" data-color="primary">
  <svg class="qf-icon"><use href="design/sprites/icons.svg#plus"/></svg>
  New task
</button>

type ButtonProps = {
  variant?: 'contained' | 'outlined' | 'text' | 'ghost' | 'soft';
  color?: 'primary' | 'info' | 'success' | 'warning' | 'error';
  size?: 'xs' | 'sm' | 'md';
  iconOnly?: boolean;
  loading?: boolean;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

export const Button = ({ variant, color, size, iconOnly, loading, ...rest }: ButtonProps) => (
  <button
    className="qf-button"
    data-variant={variant}
    data-color={color}
    data-size={size}
    data-icon-only={iconOnly || undefined}
    data-loading={loading || undefined}
    {...rest}
  />
);

export const Icon = ({ name, size, color }: IconProps) => (
  <svg className="qf-icon" data-size={size} data-color={color} aria-hidden="true">
    <use href={`${SPRITE_URL}#${name}`} />
  </svg>
);

// Inline styles keep working; the cascade resolves the variable.
<div style={{ color: 'var(--qf-color-primary-500)', padding: 'var(--qf-space-4)' }} />

// A generated tokens.ts can expose the same names typed:
export const color = { primary: { 500: 'var(--qf-color-primary-500)' /* … */ } } as const;