Custom width for Alert

[Joshi-Kajal]

Hey Team, we are using alert component to display error on our page.
By default, alert component is aligned in center of div and are not customisable in width. But in our case, it looks odd when aligned in center with small error message.

How can we set custom width to alert component so then it can looked aligned (stretched to full width) with all other components or is there any other solution to make it look better?

[shleewhite]

Hi @Joshi-Kajal!

A toast component may actually be a more appropriate component here. Toast is meant to be used when there is direct feedback for the user based on their action.

You should also use an error help text on the field that has an issue so that users know which field has a problem. There is an example on the input docs site: https://paste.twilio.design/components/input#input-with-inline-error.

[Joshi-Kajal]

Hey @shleewhite ,

On login page, for some case we throttle user and disable login for 30 seconds and displaying 30 seconds timer as part of alert! Would it be equal impactful to display timer in toast?

To maintain consistency across all error scenario, we choose to go with alert for all cases!

Can you guide on design alternative for timer scenario?

[shleewhite]

Ahh, you're right it definitely seems better to have that error as an Alert instead of a Toast. I talked about this with the team and I think this could be a workaround:

• Do not have a Toast or Alert when the user inputs the wrong username or password, use the error variant of help text instead
• Use the alert for the countdown, but make it the same width as the input. That way it is not the entire container, but it is 100% width of the content on the page.

Does this solution work for you?

[Joshi-Kajal]

So, How can I make alert same width as input? Should I use box inside alert to give width?

[Joshi-Kajal]

Do not have a Toast or Alert when the user inputs the wrong username or password, use the error variant of help text instead
So for login pages actually, we do not inform user what exactly is incorrect(username/password) because of security reason. If something is wrong with credential we let user know after they submit password only(it's 2 step login process)!
So display error as help text on password field would not be nice experience as it is not specifically indicating error only in password input!

[andioneto]

@Joshi-Kajal Hi there, thanks for the additional information and questions.

So, How can I make alert same width as input? Should I use box inside alert to give width?

Checkout this codesandbox that provides some examples of a few different ways you can "set" the width of the alert. Happy to chat further about this if it isn't clear.

So for login pages actually, we do not inform user what exactly is incorrect(username/password) because of security reason. If something is wrong with credential we let user know after they submit password only(it's 2 step login process)!

I will check in with folks tomorrow to confirm, but I believe the example in this sandbox is what @shleewhite was referring to. To see the error state click "log in", and to clear it, click the "clear" secondary button.

Would this be possible?

[andioneto]

@Joshi-Kajal Here is a summary of the above discussion 👇

ℹ️ Use the error variant of help text paired with an input to communicate that either the password or username are incorrect. Check out this example here.

🔔 Use an alert to communicate the time remaining until the user may attempt again. Be sure that the alert spans the content width of the input. The implementation details for this depend on how the UI is implemented. Checkout these examples of how this could be accomplished.

Thanks for reaching out, and please do let us know if you have any more questions. 😄