How to truncate text on a button variant as link

[sivapriya-k]

Hi Team,

Is it possible to use truncate on a button text? To give some context, we are building a timeline view and want to display labels/SID as ticks that are clickable and would show a modal on click. If label/name is not available, we show the SID and would like to truncate the SID so it doesn't go over the chart.

Here is a codesandbox trying to use truncate on button text
https://codesandbox.io/s/epic-brattain-i9nwh

[sivapriya-k]

Got it by moving the box inside the button component. Closing this.

[TheSisb]

Hi @sivapriya-k,

Glad you figured this one out. Here's a possible alternative approach: https://codesandbox.io/s/truncate-button-text-dj80w.

The Truncate component was built to help handle situations like these, so you don't need to roll your own solution.