Table with multiple statuses

[char-mainewang]

hey team, i'm designing a table that contains 2 statuses:

• one to indicate if it's on or off
• another to indicate the status of the job (in progress, success, failed).

we currently use the evergreen's status component pretty consistently across app to indicate on/off or if something is live.

I'm considering using a badge to indicate the job status to add visual contrast and draw attention to the job status as that should take precedent over the on/off status in most cases. here's a link to the table design. would love to know if I should stick to using the status component or use the badge, any guidance from the team on what to do in this situation would be greatly appreciated :)

[loreina]

Hi @char-mainewang, I brought this back to the team and we'll get back to you soon. Thanks for being patient!

[loreina]

Hi @char-mainewang, we have a ticket in our backlog to add Badge to the Status pattern since we built Badge after the pattern was first published.

For your use case, we would recommend to either use:

1. Process status for "Run Status" and connectivity status for "Mapping Status"
2. Badge for "Run Status" and connectivity status for "Mapping Status"

I made a couple mockups of the 2 recommendations here: https://www.figma.com/file/SpeLpBoqN2vZv8KWcSn0J1/Paste-Feedback?node-id=1708%3A377967. You can find the Status pattern component in the Paste Patterns library, and Badge in the Paste Components library.

Let us know what you decide to go with (especially if you go with Badge) and we can add your designs as a use case for when we get around to adding Badge to the Status pattern!

[char-mainewang]

Hi, just realized i never updated this github post, but I decided to use badges in my original evergreen designs.

As we're transitioning to Paste, i'm curious to get y'all thoughts on whether we should use badges to represent sync status (for different things syncing) consistently across the app even if it's not displayed with a connectivity status or only use badge when it's displayed with a connectivity status?

[SiTaggart]

Wow, this is an old thread! We now have a Status Badge component, it comes with process and connectivity variants. The Process Status variants might work for you.

As for consistent representation, that's up to you and the app, I guess. There is some concern on the team that badges in tables can become pretty noisy visually, but ultimately I think that's your trade-off call to make. Habit-forming consistency vs Ideal visual treatments.

[charleneyjh1]

Hi @SiTaggart

Is the status badge component meant to replace status pattern? I'm not sure when should i use the status with border and when should i use the one without border. Could you provide more clarity there? Planning to use them in a table to indicate whether a destination is live or disabled, or has an error.

[serifluous]

Hey @charleneyjh1 ! We unfortunately still need to do some work in updating the Status pattern.

Generally, you'd show status without the border (just icon + text) in a table, and then use the Status Badge outside of a table: https://paste.twilio.design/patterns/status#status-badges

(Some of the examples on the Status pattern page don't reflect that guidance right now.)

[charleneyjh1]

I see, thanks for clarifying! that helps a lot.