Skip to main content

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>
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>
</>
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>
    </>
  );
}
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>
</>
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>
  );
}
Result
Loading...

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>
</>
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

NameTypeDefault
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.