Can help text component be used with a link style button?

[sbhimsen]

Currently I'm working on the Virtual Phone experience for which I need to add an error state when due to technical issue(unable to load the screen). So I need to add a "try again" Link style button with the "error message" (for which I have used the help text component).
Based on the paste guidelines I cannot use an "Alert" component in response to user action and using the "callout" component is not feasible for this screen. Here is the figma link : https://www.figma.com/design/5tZ6RufINtHWyU5ikCa01l/Try-it-out---SMS?node-id=4343-29102&t=o22Oj0JOElR2jfSc-1

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

To address the error state due to a technical issue where the screen is unable to load in the Virtual Phone experience, and you need to add a "try again" link-style button with the error message using the Help Text component, you should follow the guidelines for conveying an error related to whether a message was sent. According to the Paste documentation, for such scenarios, you should use Help Text inside the Message Meta to convey the error. The message should be limited to a single sentence focusing on how the user can resolve the issue. Additionally, offering a link-style retry button is recommended when applicable.

Here's how you can implement it based on the Paste design system:

1. Use the Help Text component to display the error message. Ensure the message is concise and provides clear guidance on how to resolve the issue.
2. Include a link-style retry button as part of the Help Text or nearby to allow users to attempt to reload the screen or perform the action again.

Here is an example of how you might structure the code using Paste components (note that actual component syntax might vary and you should refer to the latest Paste documentation for accurate implementation details):

import {HelpText} from '@twilio-paste/help-text';
import {Button} from '@twilio-paste/button';

// Error message with a retry button
<HelpText variant="error">
  We encountered a technical issue and couldn't load the screen. Please 
  <Button variant="link" onClick={handleRetry}>try again</Button>.
</HelpText>

In this example, handleRetry would be a function in your component that attempts to reload the screen or the data that failed to load initially.

For more detailed guidance on using the Help Text and Button components, including the link-style button, you can refer to the Paste documentation:

• Help Text: https://paste.twilio.design/components/help-text
• Button (Link-style button): https://paste.twilio.design/components/button#link-style-button

Remember, the goal is to provide users with a clear, actionable way to overcome the error and proceed with their task.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Alert behavior instead of inline error option (updated: 08/23/2022, similarity score: 85%)
• Flex CBM: Tooltip with error help text - Answer (updated: 02/10/2022, similarity score: 85%)
• Copy and Paste button? (updated: 03/18/2024, similarity score: 85%)

[dosubot[bot]]

Hey there, @sbhimsen! 👋 I'm here to assist you with bug squashing, answering questions, and becoming a contributor. Let's dive into this together!

Yes, the help text component can be used with a link style button for displaying an error message in the Virtual Phone experience. The HelpText component is suitable for communicating contextual errors, such as field validation, and can be used without relying on "Alert" or "Callout" components. Here is an example of how you might use the HelpText component:

import { HelpText } from '@twilio-paste/help-text';
import { Anchor } from '@twilio-paste/anchor';

<HelpText id="error_help_text" variant="error">
  Unable to load the screen. Please try again. 
  <Anchor href="#" onClick={handleRetry}>Try again</Anchor>
</HelpText>

This example shows how you can include a link within the HelpText to provide a "try again" option, adhering to the constraints mentioned ^[1].

To continue talking to Dosu, mention @dosu.

[serifluous]

Hey @sbhimsen ! The solution you linked in Figma is definitely doable.

A better solution might be to use the error variant of the Empty state pattern, especially since it seems like you're trying to show a loading error: https://paste.twilio.design/patterns/empty-state#error-states. The layout for this can be similar to what you have for your "No results found" state.