Description
Use case
When using Badge inside a Table cell to display dynamic content (e.g., resource tags like aws:cloudformation:stack-name=my-very-long-stack-name), long text causes the Badge to expand beyond the column width. Since Badge renders as an inline-block element, the table row height increases when the column is resized and the Badge cannot wrap internally, so it forces the row to grow.
There is currently no way to constrain Badge content with standard CSS (overflow: hidden; text-overflow: ellipsis; white-space: nowrap) because the text is not a direct child of the overflow container, it's nested inside Badge's internal markup.
Proposed solution
Add a truncate boolean prop (or similar) to Badge that enables single-line text overflow with ellipsis:
<Badge truncate>aws:cloudformation:stack-name=my-very-long-value</Badge>
When enabled, the Badge's internal text container would apply:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
And the Badge itself would respect a max-width (either from a parent container or an explicit prop) rather than always sizing to its content.
Workarounds attempted
- Wrapping Badge in a div with overflow: hidden — clips visually but does not show ellipsis
- Placing a styled span inside Badge children with text-overflow: ellipsis — does not respond to column resizing because Badge sizes to its content, creating a circular width dependency
- Programmatic text truncation
(string.slice(0, N) + '…') — works but is not responsive to layout changes
Code of Conduct
Description
Use case
When using Badge inside a Table cell to display dynamic content (e.g., resource tags like aws:cloudformation:stack-name=my-very-long-stack-name), long text causes the Badge to expand beyond the column width. Since Badge renders as an inline-block element, the table row height increases when the column is resized and the Badge cannot wrap internally, so it forces the row to grow.
There is currently no way to constrain Badge content with standard CSS (overflow: hidden; text-overflow: ellipsis; white-space: nowrap) because the text is not a direct child of the overflow container, it's nested inside Badge's internal markup.
Proposed solution
Add a truncate boolean prop (or similar) to Badge that enables single-line text overflow with ellipsis:
When enabled, the Badge's internal text container would apply:
And the Badge itself would respect a max-width (either from a parent container or an explicit prop) rather than always sizing to its content.
Workarounds attempted
(string.slice(0, N) + '…')— works but is not responsive to layout changesCode of Conduct