TextCompact

TextCompact component is used for....

Props

Component props
Name	Type	Default
`align`	`"start" \| "end" \| "center" \| "forceLeft" \| "forceRight"`	`"start"`
	`"start"` and `"end"` should be used for regular alignment since they flip with locale direction. `"forceLeft"` and `"forceRight"` should only be used in special cases where locale direction should be ignored, such as tabular or numeric text. See the alignment variant for more details.
`children`	`React.Node`	-
	The text content to be displayed.
`color`	`"default" \| "disabled" \| "subtle" \| "success" \| "error" \| "warning" \| "shopping" \| "link" \| "inverse" \| "recommendation" \| "light" \| "dark"`	`"default"`
	The color of the text content. See the colors variant for more details.
`dataTestId`	`string`	-
	Available for testing purposes, if needed. Consider better queries before using this prop.
`inline`	`boolean`	`false`
	Indicates how the text should flow with the surrounding content. See the block vs inline variant for more details.
`italic`	`boolean`	`false`
	Indicates if the text should be displayed in italic. See the styles variant for more details.
`lineClamp`	`number`	-
	Visually truncate the text to the specified number of lines. This also adds the `title` attribute if `children` is a string, which displays the full text on hover in most browsers. See the overflow and truncation variant for more details.
`overflow`	`"normal" \| "breakAll" \| "breakWord" \| "noWrap"`	`"breakWord"`
	Indicates how the text content should handle overflowing its container. See the overflow and truncation variant for more details.
`ref`	`HTMLDivElement \| HTMLSpanElement`	-
	Ref that is forwarded to the underlying element. See the ref variant for more details.
`title`	`string`	-
	This populates the `title` attribute of the element, which is visible on hover in most browsers. This is useful when truncating the text with `lineClamp` when `children` is a `React.Node`. See the Title variant for more details.
`weight`	`"emphasis" \| "default"`	`"default"`
	Indicates the font weight for the text content. See the styles variant for more details.

Variants

Alignment

Use align to adjust the positioning of text within wrapper elements.

import { Divider, Flex, TextCompact } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Flex direction="column" gap={{ column: 4, row: 0 }} width={200}>
        <TextCompact align="start">Start (default)</TextCompact>
        <Divider />
        <TextCompact align="end">End</TextCompact>
        <Divider />
        <TextCompact align="center">Center</TextCompact>
        <Divider />
        <TextCompact align="forceLeft">Force left</TextCompact>
        <Divider />
        <TextCompact align="forceRight">Force right</TextCompact>
      </Flex>
    </Flex>
  );
}

Block vs. inline

The TextCompact component allows you to specify whether you want block or inline text.

import { Box, Flex, TextCompact } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Flex alignItems="start" direction="column" gap={{ column: 4, row: 0 }}>
        <TextCompact>
          Some content in a default block element. (default)
        </TextCompact>
        <Box>
          <TextCompact inline>Inline text with the inline prop.</TextCompact>{' '}
          <TextCompact inline>More inline text.</TextCompact>
        </Box>
      </Flex>
    </Flex>
  );
}

Colors

You can specify which color you want for your text. Most colors change in dark mode, but light and dark are available when no switch is desired.

import { Box, Flex, TextCompact } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Flex alignItems="start" direction="column" gap={{ column: 3, row: 0 }}>
        <TextCompact color="default">Default</TextCompact>
        <TextCompact color="subtle">Subtle</TextCompact>
        <Box color="inverse" padding={1}>
          <TextCompact color="inverse">Inverse</TextCompact>
        </Box>
        <TextCompact color="disabled">Disabled</TextCompact>
        <TextCompact color="error">Error</TextCompact>
        <TextCompact color="success">Success</TextCompact>
        <TextCompact color="warning">Warning</TextCompact>
        <TextCompact color="recommendation">Recommendation</TextCompact>
        <TextCompact color="link">Link</TextCompact>
        <TextCompact color="shopping">Shopping</TextCompact>
        <Box color="primary" padding={1}>
          <TextCompact color="light">Light</TextCompact>
        </Box>
        <Box color="infoWeak" padding={1}>
          <TextCompact color="dark">Dark</TextCompact>
        </Box>
      </Flex>
    </Flex>
  );
}

Overflow & truncation

Gestalt provides utility options to deal with text overflow.

import { Box, Flex, TextCompact } from 'gestalt';

export default function Example() {
  return (
    <Flex height="100%" justifyContent="center" width="100%">
      <Flex direction="column" gap={{ column: 2, row: 0 }} width={200}>
        <TextCompact>breakWord (default):</TextCompact>
        <Box color="secondary" padding={2} rounding={2}>
          <TextCompact>
            This is a long and Supercalifragilisticexpialidocious sentence.
            次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
          </TextCompact>
        </Box>

        <TextCompact>normal:</TextCompact>
        <Box color="secondary" padding={2} rounding={2}>
          <TextCompact overflow="normal">
            This is a long and Supercalifragilisticexpialidocious sentence.
            次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
          </TextCompact>
        </Box>

        <TextCompact>breakAll:</TextCompact>
        <Box color="secondary" padding={2} rounding={2}>
          <TextCompact overflow="breakAll">
            This is a long and Supercalifragilisticexpialidocious sentence.
            次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
          </TextCompact>
        </Box>

        <TextCompact>lineClamp:</TextCompact>
        <Box color="secondary" padding={2} rounding={2}>
          <TextCompact lineClamp={2}>
            This is a long and Supercalifragilisticexpialidocious sentence.
            次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
          </TextCompact>
        </Box>
      </Flex>
    </Flex>
  );
}

Style

TextCompact is available in ´default´ and ´emphasis´ weight as well as in italic.

import { Flex, TextCompact } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Flex alignItems="start" direction="column" gap={2}>
        <TextCompact weight="default">Default</TextCompact>
        <TextCompact weight="emphasis">Emphasis</TextCompact>
        <TextCompact italic>Italic</TextCompact>
      </Flex>
    </Flex>
  );
}

Title

The title attribute on a <div> can be used to show the full text of a truncated string on hover. That attribute is populated automatically when the text is truncated using lineClamp, as long as children is a string.
If children is a React.Node (e.g. when using Link), use the title prop to manually set the title attribute.

import { Box, Flex, Link, TextCompact } from 'gestalt';

export default function Example() {
  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Flex alignItems="start" direction="column" gap={2}>
        <Flex alignItems="center" direction="column" gap={2}>
          <TextCompact weight="emphasis">
            Hover over the examples below for a few seconds to see the title
            text:
          </TextCompact>

          <Box borderStyle="sm" maxWidth={400} padding={1}>
            <Flex direction="column" gap={3}>
              <Flex direction="column" gap={1}>
                <TextCompact italic>
                  This title attribute is automatically added because lineClamp
                  is used and children is a string.
                </TextCompact>
                <TextCompact lineClamp={1}>
                  This is a long and Supercalifragilisticexpialidocious
                  sentence.
                  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
                </TextCompact>
              </Flex>

              <Flex direction="column" gap={1}>
                <TextCompact italic>
                  This example uses lineClamp but has no title attribute,
                  because children is a React.Node.
                </TextCompact>
                <TextCompact lineClamp={1}>
                  <Link href="#">
                    This is a long and Supercalifragilisticexpialidocious
                    sentence.
                    次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
                  </Link>
                </TextCompact>
              </Flex>

              <Flex direction="column" gap={1}>
                <TextCompact italic>
                  This example uses lineClamp and children is a React.Node, but
                  uses the title prop.
                </TextCompact>
                <TextCompact
                  lineClamp={1}
                  title="This is a long and Supercalifragilisticexpialidocious sentence. 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉"
                >
                  <Link href="#">
                    This is a long and Supercalifragilisticexpialidocious
                    sentence.
                    次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
                  </Link>
                </TextCompact>
              </Flex>
            </Flex>
          </Box>
        </Flex>
      </Flex>
    </Flex>
  );
}

Refs

Don't use ref to manipulate the underlaying HTML div or span elements. Use ref to only read HTML attributes. For example, a valid use case can be detecting truncation. The example below illustrates a case where detecting truncation allows rendering links contained within Text.

import { useEffect, useRef, useState } from 'react';
import { Box, Flex, Label, Link, Switch, TextCompact } from 'gestalt';

export default function Example() {
  const [showLongText, setShowLongText] = useState(false);
  const [applyTruncationDetection, setApplyTruncationDetection] =
    useState(false);

  const text =
    'Tag brand partners in your Idea Pins with the paid partnership tool.';

  const veryLongText =
    'Tag brand partners in your Idea Pins with the paid partnership tool. Just make an Idea Pin in the app, add the paid partnership label and tag your partner brand. Once they approve the request, their brand name will show up on your Idea Pin. Brands can also choose to promote your Idea Pins as ads, boosting your reach to even more people. When you use the paid partnership tool, you work directly with brands to define the payment terms and process. Pinterest will not be directly involved in payment.';

  const textRef = useRef(null);
  const [ellipsisActive, setEllipsisActive] = useState(false);

  const isEllipsisActive = (element) =>
    element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth;

  useEffect(() => {
    const checkEllipsisActive = () => {
      if (textRef.current) {
        if (!ellipsisActive && isEllipsisActive(textRef.current)) {
          setEllipsisActive(true);
        } else if (ellipsisActive && !isEllipsisActive(textRef.current)) {
          setEllipsisActive(false);
        }
      }
    };
    checkEllipsisActive();
    window.addEventListener('resize', checkEllipsisActive);
    return () => {
      window.removeEventListener('resize', checkEllipsisActive);
    };
  });

  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Flex direction="column" gap={8} width="90%">
        <Flex direction="column" gap={2}>
          <Box alignItems="center" display="flex">
            <Box paddingX={2}>
              <Label htmlFor="longText">
                <TextCompact>Show long text</TextCompact>
              </Label>
            </Box>
            <Switch
              id="longText"
              onChange={() => setShowLongText(!showLongText)}
              switched={showLongText}
            />
          </Box>
          <Box alignItems="center" display="flex">
            <Box paddingX={2}>
              <Label htmlFor="truncation">
                <TextCompact>Apply truncation detection</TextCompact>
              </Label>
            </Box>
            <Switch
              id="truncation"
              onChange={() =>
                setApplyTruncationDetection(!applyTruncationDetection)
              }
              switched={applyTruncationDetection}
            />
          </Box>
        </Flex>
        <Flex direction="column">
          <TextCompact
            ref={textRef}
            align="start"
            inline
            lineClamp={2}
            title={
              ellipsisActive && typeof veryLongText === 'string'
                ? veryLongText
                : undefined
            }
          >
            {showLongText ? veryLongText : text}{' '}
            <TextCompact inline>
              <Link
                accessibilityLabel="Visit our Help Site"
                display="inline"
                href="#"
              >
                Visit our Help Site
              </Link>
            </TextCompact>
          </TextCompact>
          {ellipsisActive && applyTruncationDetection ? (
            <TextCompact>
              <Link
                accessibilityLabel="Visit our Help Site"
                display="inline"
                href="#"
              >
                Visit our Help Site
              </Link>
            </TextCompact>
          ) : null}
        </Flex>
      </Flex>
    </Flex>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web		Component does not respond to changing viewport sizes in web and mobile web.

Heading
A component to use for all text content on a page except for UI text components.

Heading
Heading allows you to add H1–H6 level text on a page. They are generally placed underneath a PageHeader, and provide you with a way to create a logical text hierarchy.

Typography guidelines
A run-down on our typographic foundations, with some guidelines for using Heading and Text components together in products.

Link
Used as a text-only navigational element. Links usually appear within or directly following a paragraph or sentence.

Edit page on GitHub