The Text component adds accessible overflow behavior to a line of text by conditionally adding the title attribute and truncating with an ellipsis when content overflows its container.

Included Components

  1. Text: Accepts and renders arbitrary children. It is intended that these children render as text.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis eget nunc lobortis mattis aliquam faucibus. Integer vitae justo eget magna fermentum. Amet nisl purus in mollis nunc sed id semper. Convallis tellus id interdum velit laoreet id. Consectetur lorem donec massa sapien faucibus et molestie ac feugiat. Sed egestas egestas fringilla phasellus faucibus scelerisque. Eu facilisis sed odio morbi quis commodo odio aenean. Sed cras ornare arcu dui vivamus arcu. Ut morbi tincidunt augue interdum. Quisque egestas diam in arcu cursus euismod quis viverra nibh. Egestas quis ipsum suspendisse ultrices gravida. Congue quisque egestas diam in. Eget nunc scelerisque viverra mauris in aliquam.



1import React from "react";
2import { Text } from "@commure/components-foundation";
4function MyText() {
5 return <Text ellipsize>Sample Text</Text>;
8export default MyText;

API Reference


Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
ellipsizefalsebooleanIndicates that this component should be truncated with an ellipsis if it overflows its container. The `title` attribute will also be added when content overflows to show the full text of the children on hover.
tagNamefalsekeyof IntrinsicElementsHTML tag name to use for rendered element.

Related Reading

Blueprint Reference