[@thumbtack/tp-ui-react-button-row]: ButtonRow doesn't allow for full width buttons.

[xanderwebs]

This is perhaps intentional, but filing here just in case it's not. When there are two full width buttons, I expected the component to render two 50% full buttons. Instead I got two small buttons.

<ButtonRow>
    <Button width="full" onClick={this.onClickSubmit}>
        Continue
    </Button>
    <Button width="full" onClick={onCloseClick} theme="secondary">
        Cancel
    </Button>
</ButtonRow>

Expected:

Actual:

cc @danoc

[danoc]

Hi @xanderwebs! If I remember correctly, this was intentional because Joe J., at the time, didn't want to support side-by-side full width buttons.

We typically use right-aligned buttons within modals with the primary CTA as the right-most button. If the designer feels strongly, I'd recommend accomplishing this layout with flexbox.

One thing to consider is is how the buttons will look on mobile web. The ButtonRow component, if used, can handle that stacking:

https://thumbprint.design/api/components/layout/button-row/react/#example-stacked-at-small

[danoc]

Hi @xanderwebs! @jonpkerwin and I have been working on buttons lately and it looks like we'll be making this 50/50 button layout an official pattern. I'll keep this open until it is implemented. Hope the workaround worked out out for you as a quick solution.