Truncated
Truncated clips longer text with an ellipsis and provides an accessible tooltip that displays on truncation.
Anatomy
- Required
- Optional
| # | Required | Element | Description |
|---|---|---|---|
| 1 | Text container | Inline element that renders a single line of text cut off with an ellipsis. |
Guidelines
When to use
Truncated is a typographic component used to visually cut off text content when it expands past its parent container. It's best used in cases where a value has to fit a fixed width but the whole value still matters. Some examples include:
- Table cells: Resource names, IDs, email addresses, and raw attribute values in a column with a set width.
- List and card titles: Asset, message, and template names in a browser or dashboard grid.
- Panel and drawer headers: A title that shares a row with a fixed set of actions.
- Badges and menu items: Workspace names, style tokens, and font names inside a narrow trigger.
If there is no scenario where text within Truncated is ever clipped, consider dropping the component.
Best practices
Text length
Use Truncated for names, identifiers, and other single-line values whose length cannot be controlled. Skip it for values that are always short, like statuses, counts, and dates, and for long-form copy that's important for the user to read.
Appearance
Typography
Truncated is built on top of the primitive Text component and inherits props for size, weight, color, font family, font style, and predefined text style props. Change individual props as required.
Typography props carry over from Text, so a truncated value can take any weight, size, or color.
Behaviors
Tooltip
The Truncated component includes a Tooltip by default with the goal of helping the user understand the full text on hover. When creating custom Tooltip content, avoid using supplementary text that explains the truncated value. Instead, be sure to write the content exactly as written as plain text without any formatting or markup.
The Tooltip mirrors the visible text, so a plain string needs no configuration.
Setting the Tooltip text keeps the overlay readable when the children carry a link, so the overlay repeats the full value as plain text instead of a second link.
Placement
Tooltips can be positioned on any side of their trigger. The position is not a guarantee—smaller viewports may cause the Tooltip to reposition as needed to remain visible to the user.
Bottom is the default and suits values in a table row or list.
Top keeps the overlay clear of content below, such as a subtitle or a row of actions.
Left keeps the overlay clear of content to the right, such as a trailing action or badge.
Right keeps the overlay clear of content to the left, such as a leading icon or avatar.
Visibility
The Tooltip only opens when the parent text is actually clipped.
Tooltips don't open if the text fits its container.
Tooltips open when the text content is clipped.