How do I add position: absolute to this button in react js-CodePudding

I want to add position:absolute to this line of code but i am not sure if thats possible in react js.

 <Button href={LINKS.application} external>
          Join today!
        </Button>

If it is possible to add position:absolute within that line, please let me know how.

and here is the code in my button component:

 export type ButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
  iconName?: SupportedIcons
  external?: boolean
  href?: string
  target?: HTMLAttributeAnchorTarget
}

const Button: React.FC<ButtonProps> = ({ children, external, iconName, disabled, href, target, ...props }) => {
  if (href)
    return (
      <Link href={href}>
        <a
          href={href}
          target={target ?? (external ? '_blank' : '_self')}
          className={`font-secondary text-xs md:text-base flex flex-row items-center gap-2 bg-white rounded-xl px-5 py-4 text-content-button font-bold hover:opacity-70 duration-300 ${
            disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'
          }`}
        >
          {!!iconName && <Icon iconName={iconName} />}
          <span>{children}</span>
          {external && <Icon iconName="arrow" />}
        </a>
      </Link>
    )

  return (
    <button
      {...props}
      disabled={disabled}
      className={`font-secondary text-xs md:text-base flex flex-row items-center gap-2 bg-white rounded-xl px-5 py-4 text-content-button font-bold hover:opacity-70 duration-300 ${
        disabled && 'cursor-not-allowed opacity-70'
      }`}
    >
      {!!iconName && <Icon iconName={iconName} />}
      {children}
      {external && <Icon iconName="arrow" />}
    </button>
  )
}

I hope this helps to see where I can add the positioning. Thanks

CodePudding user response：

As many comments have said, Button, is a component that I dont know where you got it from, so maybe it is opinionated and wont accept inline styling, but here is how you would do it if Button acts as css buttons.

       <Button
          href={LINKS.application}
          style={{ position: 'absolute', top: '400px', right: '400px' }}
          external
        >
          Join today!
        </Button>

Then just change the values for top and right, or write bottom or left if you want. Good luck!

CodePudding user response：

<Button style={{position:"absolute"}} href={LINKS.application} external>Join today!
</Button>

It can be made this way, as inline style