Components / Composition
Truncated text
A single line that shows its full text in a tooltip only when it is cut off.
@fabrials/ui
- Short title
- Quarterly planning notes for the storage migration and the retention policy review
- Draft reply
Last action: none
Installation
Import the control from
@fabrials/ui, after setting the app up.TypeScript import { TruncatedText } from "@fabrials/ui";
API reference
| Prop / export | Type | Description |
|---|---|---|
children | string | The full text. |
side | top | right | bottom | left | Where the tooltip opens. sideOffset and align refine it. |
Behavior
The tooltip never intercepts clicks on row actions next to it. Text that fits has no tooltip.
Accessibility
Keyboard and contrast
Keep visible labels, keyboard focus and status announcements when customizing. These components inherit your theme; maintain sufficient contrast in both color modes. The preview is keyboard operable.