Skip to main content

Text

Base​

Italic​

Sizes and weights​

Change the values to see the result.

Custom Element​

Colored​

Truncate​

Word break​

Use the wordBreak property to break the words when is inside a container with limited width. It is useful when you don't control the size of displayed text (like URLs, subdomains, etc...).

Forwarded Props​

To wrap the Text in a styled() of the Styled Components, use the forwardedAs property to pass the desired styles. If not needed, use the as property, as per the custom element example.

import React from 'react';
import styled from 'styled-components';
import { Text } from '@resultadosdigitais/tangram-components';

const CustomText = styled(Text)`
  margin-bottom: var(--size-spacing-04);
`;

const ForwardedProps = () => {
  return (
    <>
      <CustomText as="div" textColor="--success-text" isItalic>
        ❌ Wrong way! The Text component doesn't receive the{' '}
        <code>textColor</code> and <code>isItalic</code> props.
      </CustomText>

      <CustomText forwardedAs="div" textColor="--success-text" isItalic>
        ✅ Correct way! The Text component receive the <code>textColor</code>{' '}
        and <code>isItalic</code> props.
      </CustomText>
    </>
  );
};

export default ForwardedProps;

Feedback​