```jsx
import { forwardRef } from 'react';

export const DisabledButtonPage = () => (
  <div className="space-x-1 mb-4 md:space-x-6 space-y-3">
    <Button color="primary" disabled>
      Primary
    </Button>
    <Button color="success" disabled>
      Success
    </Button>
    <Button color="danger" disabled>
      Danger
    </Button>
    <Button color="warning" disabled>
      Warning
    </Button>
    <Button color="dark" disabled>
      Dark
    </Button>
    <Button color="indigo" disabled>
      Indigo
    </Button>
  </div>
);

const Button = forwardRef(({ children, disabled, color, ...props }, ref) => (
  <button
    ref={ref}
    {...props}
    disabled={disabled}
    className={`${colors[color]} ${
      disabled ? 'opacity-60 cursor-not-allowed' : ''
    }  text-white focus:outline-none shadow rounded px-6 py-2 font-medium transition ease-in duration-200`}
  >
    {children}
  </button>
));

const colors = {
  primary: `bg-blue-700 focus:ring-2 focus:ring-offset-2 focus:ring-blue-700 focus:ring-offset-blue-100`,
  success: `bg-green-700 focus:ring-2 focus:ring-offset-2 focus:ring-green-700 focus:ring-offset-green-100`,
  danger: `bg-red-600 focus:ring-2 focus:ring-offset-2 focus:ring-red-600 focus:ring-offset-red-100`,
  dark: `bg-black focus:ring-2 focus:ring-offset-2 focus:ring-gray-800 focus:ring-offset-gray-100`,
  warning: `bg-yellow-500 focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 focus:ring-offset-yellow-100`,
  indigo: `bg-indigo-900 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-900 focus:ring-offset-indigo-100`,
};
```
