Can we use Messagings insights toggle button pattern?

[mjanssen2021]

The Messaging > Insights page has these toggle button pattern (Image below highlighted in yellow), in which a user can toggle different ways to display the information in that card.

Can we get approval from the design systems team to replicate this pattern ourselves in our Verify > SMS Fraud Insights dashboard data visualization page we are currently building (this is brand new functionality)?

Or is there something we should keep in mind when replicating this pattern ourselves using the paste Toggle Button (https://paste.twilio.design/components/button#toggle-button) and high charts? Thanks.

I attached our new concept mock below the older messaging one.

[shleewhite]

Hi @mjanssen2021!

Can you clarify what you mean by replicating the pattern? Are you able to use the Paste Button or are you re-building it?

One note, the UX Infrastructure doesn't approve or sign off on designs at Twilio because we don't necessarily have all the product context needed to tell you if your designs are correct.

[mjanssen2021]

Hi Lee, ah good to know. We want to rebuild it using pate - but now knowing that ux infastructure doesn't necessarily sign off on these types of questions - would this be a better question to bring to a desgin systems office hours instead?

Thank you!

[shleewhite]

Sure!

Here are a couple things to keep in mind when building a toggle button:

• Use the aria-pressed attribute to let all users know about the current state of the button. It is false when off and true when toggled on.
• The text of the button should not change with the state. So for your example, the bar chart button could have visually hidden text that says "Display as bar chart".