Badges in Tables/Datagrids

[ceyerkes]

Hi! Wondering if it would be possible to add Badges and Pills as cell content variants in Tables and Datagrids? It looks like both Segment and Twilio UIs use both frequently. Of course we can continue using the Slot component, but just thought I'd ask!

Thanks!

cc: @dmeachin

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

---

Hi there!

Yes, you can definitely use Badges as cell content in Tables and Datagrids. The Paste documentation supports the idea of putting whatever you like (within reason) into a table cell, aiming to keep the design simple and not overloaded. This flexibility includes buttons, badges, links, icons, or anything small and inline that fits the context of your data presentation.

Here's a snippet from the documentation that supports this:

"For question one, yup, you can essentially put whatever you like (within reason) to a column header. Try to keep them simple, and not overload them, but it'll take a button, a badge, a link, an icon, anything kind of small and inline."

This guidance applies to both headers and cell content, allowing for a wide range of customization options, including the use of Badges within cells to convey specific statuses, categories, or other relevant information succinctly.

For more details on how to implement this, you can refer to the Badge component documentation here: Badge Component

And for general guidance on using Tables and Datagrids in Paste, these links might be helpful:

• Table Component
• Data Grid Guidelines

Hope this helps with your design!

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 inside Tabs? (updated: 11/29/2023, similarity score: 87%)
• Badge in masthead (updated: 06/28/2022, similarity score: 86%)
• Badges in tables and data grids (updated: 04/28/2023, similarity score: 85%)

[serifluous]

Thanks for the suggestion! Just published an update in Figma.