Button loading state shifts position of other elements

[vdineva]

A common pattern in Magnetic is to display a primary button and a secondary/tertiary button next to each other. According to their specs: https://magnetic.cisco.com/0a43ab5cd/p/56608b-button/t/330d12 the primary button should become disabled when the action is async and we need to display a loader inside it

I've tried the following 2 approaches but they both shift the position of the secondary/tertiary button adjacent to the primary button and the 2 buttons are no longer vertically aligned:

() => {
  return (
    <>
      <AButton secondary className="mr-2">Cancel</AButton>
      <AButton>
        <ASpinner size="small" />
        Click Me
      </AButton>
    </>
  );
}

() => {
  return (
    <>
      <AButton tertiary className="mr-2">Cancel</AButton>
      <AButton>
        <ASpinner size="small">Click Me</ASpinner>
      </AButton>
    </>
  );
}

[rwharrisjr]

379

• adds vertical-align: middle to the .a-button class
• adds loading prop to automatically show spinner