Badge colors for status

[dsnair]

Hello,

I am building a new UI page that will have a status badge. The possible values for it are Active, Activating and Cancelation scheduled. From the Badge doc, I believe I should be using the decorative components. However, it is not entirely clear to me what colors would be appropriate for Activating and Cancelation scheduled. (I think green for Active makes sense.)

Thanks for your help!

[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.

---

For the status badge values you mentioned, you're correct in considering the use of decorative components from the Badge documentation. Since you've identified green (likely color-background-success or a similar token) as appropriate for Active, let's consider the other two statuses:

• Activating: This status implies a process that is in progress, so a color that signifies action or progress would be suitable. In many UI design systems, blue or yellow are often used to indicate an in-progress or pending state. From the Paste decorative badge options, you might consider a blue variant (decorative20 or decorative30) to signify this ongoing action. Unfortunately, the exact color recommendation for Activating isn't explicitly stated in the sections provided, so this suggestion is based on common UI design practices.

• Cancellation scheduled: This status indicates a future state change that might carry a cautionary note, so a color that signifies caution or a need for attention could be appropriate. Yellow is commonly used for such scenarios, suggesting a need for awareness or preparation. From the Paste decorative badge options, a yellow variant (decorative10) could be suitable. Again, the exact color for Cancellation scheduled isn't explicitly stated in the provided documentation sections, so this is a suggestion based on general UI design principles.

Remember, the key with decorative badges is to use color to offer visual differentiation and affordance without relying solely on color to convey meaning, ensuring accessibility and clarity in your UI.

For more detailed guidance and to explore all available decorative badge colors, please refer to the Paste Badge documentation: https://paste.twilio.design/components/badge#decorative

If these suggestions don't fully align with your design needs or if you're looking for more specific guidance, I recommend reaching out directly to the Paste design system team for further assistance.

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:

• Badge color options - Answer (updated: 06/22/2022, similarity score: 87%)
• Table with multiple statuses (updated: 10/20/2023, similarity score: 85%)
• Webchat - New Message Badge - Answer (updated: 08/30/2022, similarity score: 85%)

[serifluous]

Hey @dsnair ! The component you're looking for is likely the Status Badge instead: https://paste.twilio.design/components/status-badge. I'll make an update to our docs in a bit to make sure the difference between those 2 components are clearer!

I'd suggest using

• ProcessSuccess for Active
• ProcessInProgress for Activating
• ProcessDraft for Cancelation scheduled. Tagging in @waijeeho here to confirm, though, because I'm unsure about how visually prominent these statuses should be.

For your other question from Slack: You're right, Meter doesn't have status variants right now. I think your implementation works, but I'm going to tag @waijeeho in here again to confirm. If you both find that showing that status through the Meter itself would be clearer, please submit a dependency request: https://airtable.com/appwvsQKyJHfnG5Sa/shrvMvL3BG6Zm0f9l Thanks!

[waijeeho]

Hey @dsnair @serifluous - new to the project, but will try to provide support on these best I can. I'm looking at what I believe were the latest designs in Figma.

--
Re: Status
What I believe is the spec called for process icon + text, over using a badge, as shown here in the Paste Object status pattern page. This treatment sort of matches the text style to the other descriptions bodies in the layout.

Didn't see any additional specs outlining states other than Active, so I agree with Sarah's recommendations to use these icons for each of the states:

• ProcessSuccess for Active
• ProcessInProgress for Activating
• ProcessDraft for Cancelation scheduled

--

Re: Meter

The warning text looks like a good solution to communicating there being an overage. Whether we need an error status variant for meter — I'm not sure entirely whether customers who go over the plan limits are necessarily doing that in error, so it's probably okay to start with a warning and see if customers actually would benefit from a more error-like UI / notifications in the future?

[serifluous]

Thank you! @dsnair the borderless variant of the Status Badge is probably what you're looking for then! https://paste.twilio.design/components/status-badge#borderless-badges

[dsnair]

Thank you both! A borderless status badge when comparing against the Figma design makes sense! 🙏🏽

[dsnair]

Correction: Decided on https://paste.twilio.design/patterns/object-status#process-status so the text remains black while only the icons change.