Body

A typography primitiving for displaying text and paragraphs in an interface. This component provides all relevant typographic styles such as font-family, line-height and font-size.

Body

React

Body composes Box so you can use all the style props and add responsive styles as well.

import { Body } from '@hoverinc/design-system-react-web';

live

<Body>I'm body text</Body>

Size

Body defaults to size 500, pass the size prop to set a custom a size.

Correct Sizing

The size of Body should always be controlled via the size prop, not by setting fontSize or lineHeight

live

<Box flexDirection="column">
  <Body size={600}>Body 600</Body>
  <Body size={500}>Body 500</Body>
  <Body size={400}>Body 400</Body>
  <Body size={300}>Body 300</Body>
  <Body size={200}>Body 200</Body>
</Box>

Size Aliases

The Body component now supports size aliases that match the text styles that design uses.

live

<Box flexDirection="column">
  <Body size="footnote">Body Footnote</Body>
  <Body size="small">Body Small</Body>
  <Body size="medium">Body Medium</Body>
</Box>

Text Styles

Body typographic styles can also be applied via textStyles to other elements and in component theming.

live

<Stack>
  <system.span textStyle="body600">body600</system.span>
  <system.span textStyle="body500">body500</system.span>
  <system.span textStyle="body400">body400</system.span>
  <system.span textStyle="body300">body300</system.span>
  <system.span textStyle="body200">body200</system.span>
</Stack>

Truncation

If you'd like to truncate the text after a specific number of lines, pass the noOfLines prop. This will render an ellipsis when the text exceeds the width of the viewport or maxWidth prop.

live

<Stack maxWidth="750">
  {/* Basic */}
  <Body noOfLines={1}>
    "The quick brown fox jumps over the lazy dog" is an English-language
    pangram—a sentence that contains all of the letters of the English alphabet.
    Owing to its existence, Chakra was created.
  </Body>
  {/* Responsive */}
  <Body noOfLines={{ base: 1, tablet: 2, desktop: 3 }}>
    "The quick brown fox jumps over the lazy dog" is an English-language
    pangram—a sentence that contains all of the letters of the English alphabet.
    Owing to its existence, Chakra was created.
  </Body>
</Stack>

Balanced Wrapping

If text is wrapped into multiple lines, the prop balancedText can be used to ensure the lines have approximately the same width.

live

<VStack maxWidth="750" gap="60px">
  {/* normal */}
  <Body>
    "The quick brown fox jumps over the lazy dog" is an English-language
    pangram—a sentence that contains all of the letters...
  </Body>
  {/* balancedText */}
  <Body balancedText>
    "The quick brown fox jumps over the lazy dog" is an English-language
    pangram—a sentence that contains all of the letters...
  </Body>
</VStack>

Semantic Element

The Body component renders a p tag by default. To override the element that gets rendered, pass the as prop.

live

<Stack>
  <Body as="b">Bold</Body>
  <Body as="i">Italic</Body>
  <Body as="u">Underline</Body>
  <Body as="abbr">I18N</Body>
  <Body as="cite">Citation</Body>
  <Body as="del">Deleted</Body>
  <Body as="em">Emphasis</Body>
  <Body as="ins">Inserted</Body>
  <Body as="kbd">Ctrl + C</Body>
  <Body as="mark">Highlighted</Body>
  <Body as="s">Strikethrough</Body>
  <Body as="samp">Sample</Body>
  <Body as="sub">sub</Body>
  <Body as="sup">sup</Body>
</Stack>

Capsize

Sometimes, in order to align text properly, it's necessary to do so based on the height of the capital letters instead of the raw line-height value. For these cases, Body presets are available with a Capsize adjustment so that the vertical size of the text is aligned with its cap height.

Pass withCapsize to enable Capsize dimensions for Heading. Toggle the checkboxes below to see the difference in layout.

Note

The Capsize adjustment only applies when the display CSS property is set to inline, block, or inline-block.

Body Copy

Text Style

Capsize can also be applied via textStyle:

live

<Center fontFamily="body">
  <system.span
    as="label"
    borderRadius="2px"
    bg="danger.200"
    textStyle="body500WithCapsize"
  >
    Label with Capsize
  </system.span>
</Center>

React Native

import { Body } from '@hoverinc/design-system-react-native';

Body on React Native supports the same size variants: medium (default), small, footnote, and label.

Font Scaling

This component supports dynamic font scaling for accessibility, capped at 1.35x. See Typography — Font Scaling for full details on how scaling works and how to extend text components.

BinaryButton

Box