Allow to set the label and icon on opposite sides in fullWidth button

Desired behaviour

I would like to be able to set an icon and label in a button with “fullWidth” enabled on opposite sides.

Current behaviour

Currently it is not possible to set the icon and label on opposite sides in button. If we set fullWidth to true, the button with the icon looks like this:

Suggested Solution

Just add a new property that will set margin-left / margin-right (depending on the position of the icon) icon to “auto”. This is just one of the possible solutions.

span[data-component="icon"] { margin-left: 'auto' }

<Button buttonType="primary" iconType="caret_down" iconPosition="after" fullWidth={isSmallScreen} spaceBetween={true} // <== new property to set it > text </Button>

CodeSandbox or Storybook URL

No response

Anything else we should know?

No response

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[ljemmo]

@Parsium she’s more refactoring the component to reduce file memory so i think you can go ahead with the implementation of this feature request.

[ljemmo]

@Parsium i’ve chatted with Lisa who is currently rebuilding this component in figma. She’s supporting the proposed solution from @KonradWroblewski and we’re happy to go ahead with his spec.

FYI this is for multi-action button and not a standard button.