Can we pair help text with a button?

[rosemaryluo]

I don't think we have any paste pattern that attaches something like help text to a button, right?

Example in the quick deploy sections on CodeExchange https://www.twilio.com/code-exchange/basic-ivr

Looking for a way to attach information like help text to a button/action rather than rely on text on the page to provide it.

[gloriliale]

Hi @rosemaryluo! That's correct, this isn't something we have a pattern for since it's not as common a use case. We'd recommend putting the text above the button, so the information is read in order to a screen reader, for example. It'd be especially significant if the info is important to know before the user clicks on the button. You'd also want to use aria-describedby on the button, pointing it to the HelpText.

I also wanted to ask, what's the downside you're considering for not using default-style text in paragraphs above the button?

[rosemaryluo]

Hi @gloriliale, I totally get that it's a bit weird, it's just that the nature of the information is a little bit more similar to the help text for an input rather than what would be in paragraph form above. For CodeExchange, the paragraph text is supplied by the creator of the code sample whereas the text I want to attach to the button should be kept consistent across all code samples. Of course we can change the template to have the paragraph there, but I am looking for a way to visually distinguish content from UI without drawing too much attention to the boundaries.

[TheSisb]

Hi @rosemaryluo,

Thanks for that context! I can understand wanting to separate user-generated content from system text. We don't have any strict guidance for using HelpText outside of form controls, so what I'd suggest is doing some user testing to see what resonates best with your customers for your product.

Let us know what you find out!

[rosemaryluo]

@TheSisb Got it, we'll probably roll forward with help text attached to the button for now, I think the real problem is on us to solve user-generated vs system text distinction but sadly that's a bit further down the road. Will collect the data we can and circle back on this in the future!