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

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

const Button = forwardRef(({ color, size, children, ...props }, ref) => (
  <button
    {...props}
    ref={ref}
    className={`${colors[color]} ${
      size ? sizes[size] : sizes.md
    }  text-white focus:outline-none shadow rounded font-medium transition ease-in duration-200`}
  >
    {children}
  </button>
));

/* You can replace those colors with your own*/
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`,
};

/* You can adjust the size of the button according to your preference*/
const sizes = {
  sm: 'px-6 py-1 text-sm',
  md: 'px-6 py-2',
  lg: 'px-6 py-3 text-lg',
};
```
