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...
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, andisExternalLink
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 addingas
asReactNode
, anddisabled
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 |
| — |
color The color type |
| "dark" |
href Allow to set href of a link |
| — |
disabled Allow to disable clicking on a link |
| — |
isExternalLink Allow to indicate an external link |
| — |
as Allow to use external link component, such as: react-router-dom Link |
| — |
children The content of the Text |
| — |
css Add custom styles to this component. Use with caution. Learn more here: Link |
| — |
inputFieldCss |
| — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
* - the prop is required. |