Text

Based on the Text component in Chakra-UI. Used to render texts or paragraphs (for headings, see the Heading component).

Fonts are provided via the theme provider. The default font from the Casper UI Theme as seen below is Inter.

Component usage

import { Text } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Text>Some nice text</Text>;
}

⛶

Size

The size is set using the fontSize-property. The default size is ThemeFontSize.Medium which is equal to 1rem.

The following font sizes are recommended to use with the Text-component:

import { Stack, Text, ThemeFontSize } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack>
      <Text fontSize={ThemeFontSize.X2Large}>(2xl / 1.5rem / 24px) Casper UI Library</Text>
      <Text fontSize={ThemeFontSize.XLarge}>(xl / 1.25rem / 20px) Casper UI Library</Text>
      <Text fontSize={ThemeFontSize.Large}>(lg / 1.125rem / 18px) Casper UI Library</Text>
      <Text fontSize={ThemeFontSize.Medium}>(md / 1rem / 16px) Casper UI Library</Text>
      <Text fontSize={ThemeFontSize.Small}>(sm / 0.875rem / 14px) Casper UI Library</Text>
      <Text fontSize={ThemeFontSize.XSmall}>(xs / 0.8125rem / 13px) Casper UI Library</Text>
    </Stack>
  );
}

⛶

Weight

The weight is set using the fontWeight-property. The default weight is "normal" which is equal to 400.

import { Stack, Text } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack>
      <Text fontWeight="normal">Default text (400)</Text>
      <Text fontWeight="medium">Medium text (500)</Text>
      <Text fontWeight="bold">Bold text (700)</Text>
    </Stack>
  );
}

⛶

Color

Change the color of the text by using the color-prop, providing any ThemeColor or custom color string.

import { Text, ThemeColor } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Text color={ThemeColor.Success}>Some nice successful text</Text>;
}

⛶

The default behaviour of the Text component is to inherit color. You can provide the same color for multiple text elements by defining color for a shared parent.

import { Box, Text, ThemeColor } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Box color={ThemeColor.Error}>
      <Text>I will inherit colors from my parent</Text>
      <Text>I will inherit colors from my parent too</Text>
      <Text color={ThemeColor.Success}>I will have my own color</Text>
    </Box>
  );
}

⛶

Using “as”

The as prop is a feature from the Chakra component-library that allows you to pass an HTML tag to be rendered. In the text component we have limited this to text related elements.

Using heading tags (h1, h2, h3, h4, h5, h6) is not allowed in Text, see instead the Heading component.

import { Stack, Text } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack>
      <Text as="i">Italic</Text>
      <Text as="u">Underline</Text>
      <Text as="em">Emphasis</Text>
      <Text as="s">Strikethrough</Text>
    </Stack>
  );
}

⛶

Truncate text

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 heading exceeds the width of the parent container.

import { Box, Text } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <>
      <Box width="60px">
        <Text noOfLines={2}>I will be cut off by an ellipsis</Text>
      </Box>
      <Box width="100px">
        <Text noOfLines={1}>And I will also be cut off by an ellipsis</Text>
      </Box>
    </>
  );
}

⛶