Fluent ui Stack component makes PrimaryButton fill all the horizontal space available. How to make it shrink to fit

Question

When I put a PrimaryButton inside a Stack component from fluent ui, button is rendered as follows in an electron app. How to make it shrink to fit?

Code for this is as follows

return (
        <Stack grow={false}>
        <PrimaryButton text="Download Instruments" onClick={downloadInstruments} />
        </Stack>
    )

score 1 · Accepted Answer · answered Oct 02 '21 at 09:59

Stack component has default width: auto which means use width of parent element. But if you put Stack.Item over PrimaryButton everything will fit as you wish:

<Stack>
  <Stack.Item>
    <PrimaryButton text="Download Instruments" onClick={downloadInstruments} />
  </Stack.Item>
<Stack>

Codepen working example.

A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components.

Proper way to use Stack is when you have multiple child elements. There is no point to put Stack over one element.

Stack documentation and working examples.

Fluent ui Stack component makes PrimaryButton fill all the horizontal space available. How to make it shrink to fit

1 Answers1