<Button> Icon Only to add items replacement

[ramoneguru]

Traditionally we've always had a "button plus" component in the top left corner of layouts to indicate that a new item could be added.

The new icon buttons are square-ish (https://paste.twilio.design/components/button/#icon-only-button) and look a touch different when used in these kinds of layouts. Any recommendations for updating designs like this?

[corinne-nagel]

Hi @ramoneguru we haven't given strict guidance on where to put the new button style as compositions at this point are up to the designer/developer to decide based on their needs. That being said, I think it would look best on the top right like this:

[andelopes]

A bit of an issue: based on the docs, we should be using an Anchor in place of this button. How should we reconcile usability with this particular design?

The button opens the number search page /console/phone-numbers/search

[richbachman]

Hi @andelopes, our guidance is to use an Anchor in place of a button for the "Buy new number" button. That said if the design warrants it, you can use link styled as a button.

Our Button comes with an as prop that you can use like so:

<Button as="a" href="/console/phone-numbers/search" variant="primary">
    Buy new number
</Button>

[andelopes]

Will do. Thank you!