Developer mode
Opens components on the React tab by default.
Your bookmarks

Truncate

Clips text to fit limited space.

When you’re using progressive disclosure, you might have text that you’ve decided is too long to display all at once. You don’t want to overwhelm your users, so you want to keep it hidden but accessible.

Use a Truncate component to make sure your text fits within its parent and doesn’t take over your designs.

Component status

Figma
n/a
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Guidelines

Don’t hide anything essential

Truncating text works well for long text that might not otherwise fit on the screen. But you don’t want to hide information users need. 

Make sure you’re only hiding things that add extra value. Not something preventing the user from continuing in their main flow.

Let users get the rest

Truncating text is a great way to preview longer text. But once users see a little of your content, they may want more.

Make it clear how they get the rest of the content. Include a button to add more content to the screen, link to the full content elsewhere, or anything else to make it available.

Related components

Hide

For more control over what appears on different screen sizes, see the hide component.