Text

Text is a component for regular labels, text, etc. Making it easier for developers to use standardized typography elements instead of custom styling everything and checking type specs.

Example

Live Editor

<Text type="body1"> Hello! This is some random text with tag of 'p' and the type of 'body1' </Text>

<Text type="body1">
  Hello! This is some random text with tag of 'p' and the type of 'body1'
</Text>

Result

Loading...

Variants

Type

We have different text tags that we support can see under prop type.

Live Editor

<> <Text type="headline1">Heading 1</Text> <Text type="headline2">Heading 2</Text> <Text type="headline3">Heading 3</Text> <Text type="headline4">Heading 4</Text> <Text type="subline">Subtitle</Text> <Text type="subline2">Subtitle 2</Text> <Text type="body1">Body 1</Text> <Text type="body2">Body 2</Text> </>

<>
  <Text type="headline1">Heading 1</Text>
  <Text type="headline2">Heading 2</Text>
  <Text type="headline3">Heading 3</Text>
  <Text type="headline4">Heading 4</Text>
  <Text type="subline">Subtitle</Text>
  <Text type="subline2">Subtitle 2</Text>
  <Text type="body1">Body 1</Text>
  <Text type="body2">Body 2</Text>
</>

Result

Loading...

We also have caption tag that we support can see under prop type.

Live Editor

function myTags() { const customCSS = { width: '100px' }; return ( <> <Text type="caption1" css={customCSS}> Caption 1 </Text> <Text type="caption2" css={customCSS}> Caption 2 </Text> </> ); }

function myTags() {
  const customCSS = {
    width: '100px'
  };
  return (
    <>
      <Text type="caption1" css={customCSS}>
        Caption 1
      </Text>
      <Text type="caption2" css={customCSS}>
        Caption 2
      </Text>
    </>
  );
}

Result

Loading...

Color

We have different colors that we support can see under prop color with default as dark (excluded hyperlink).

Live Editor

<> <Text type="headline1">Heading 1</Text> <Text type="headline1" color="subtle"> Heading 1 </Text> <Text type="headline1" color="negative"> Heading 1 </Text> <Text type="headline1" color="light"> Heading 1 </Text> </>

<>
  <Text type="headline1">Heading 1</Text>
  <Text type="headline1" color="subtle">
    Heading 1
  </Text>
  <Text type="headline1" color="negative">
    Heading 1
  </Text>
  <Text type="headline1" color="light">
    Heading 1
  </Text>
</>

Result

Loading...

CSS

Live Editor

function MyText() { const customCSS = { width: '50px' }; return ( <Text type="subline" color="negative" css={customCSS}> Hello, I am a random text </Text> ); }

function MyText() {
  const customCSS = {
    width: '50px'
  };

  return (
    <Text type="subline" color="negative" css={customCSS}>
      Hello, I am a random text
    </Text>
  );
}

Result

Loading...

Hyperlink

The component also support to create a hyperlink with type link, it allows text content to be highlighted and clickable. There are 2 ways to create a hyperlink.

• Using the built-in component by adding href as regular text link, disabled to set unclickable, and isExternalLink to indicate external links (open to new tab).

Live Editor

<> <Text type="link" href='https://www.google.com/'>Learn more</Text> <Text type="link" href='https://www.google.com/' isExternalLink>Learn more</Text> <Text type="link" href='https://www.google.com/' isExternalLink disabled>Learn more</Text> </>

<>
  <Text type="link" href='https://www.google.com/'>Learn more</Text>
  <Text type="link" href='https://www.google.com/' isExternalLink>Learn more</Text>
  <Text type="link" href='https://www.google.com/' isExternalLink disabled>Learn more</Text>
</>

Result

Loading...

• Using external component such as <Link /> (react-router-dom) by adding as as ReactNode, and disabled to set unclickable (isExternalLink is not supported here).

import { Link } from 'react-router-dom';

function MyLinks() {
  return (
    <>
      <Text type='link' as={<Link to='/components'>Test</Link>} />
      <Text type='link' as={<Link to='/components'>Test</Link>} disabled />
    </>
  );
}

Props

Name	Type	Default
type * The Text type	"link" | "headline1" | "headline2" | "headline3" | "headline4" | "subline" | "subline2" | "body1" | "body2" | "caption1" | "caption2"	—
color The color type	"negative" | "dark" | "light" | "subtle"	"dark"
href Allow to set href of a link	string	—
disabled Allow to disable clicking on a link	boolean	—
isExternalLink Allow to indicate an external link	boolean	—
as Allow to use external link component, such as: react-router-dom Link	ReactNode	—
children The content of the Text	ReactNode	—
css Add custom styles to this component. Use with caution. Learn more here: Link	SupportedStyleAttributes	—
inputFieldCss	SupportedStyleAttributes	—
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.