Text

Text provides an ergonomic API for rendering text. It includes built-in support for Canvas type tokens.

Interaction Modes

Approving

Reviewing

Sources

Github

Storybook

Install

yarn add @workday/canvas-kit-react

Component Type

Text

Platform

Web

Component

Sana Canvas

Delivery Channels

Web

Version

16.1.7

Experience Surfaces

Chat Sidepanel

Component Type

Text

Platform

Web

Component

Sana Canvas

Delivery Channels

Web

Version

16.1.7

Experience Surfaces

Chat Sidepanel

Usage Guidance

Examples

Basic Example

Text is built on top of Box and supports a multitude of style props including spacing props such as margin and padding, as well as text styling props such as fontSize and fontWeight.

Text renders a <span> element by default. You may override the rendered element using the as prop.

Text as h4

Text styled using cs props

Text styled using type token level

Text with inherited styles

import {Box} from '@workday/canvas-kit-react/layout';
import {Text} from '@workday/canvas-kit-react/text';
import {system} from '@workday/canvas-tokens-web';

export default () => (
  <Box>
    <Text as="h4">Text as h4</Text>
    <Text
      as="p"
      cs={{
        fontSize: system.fontSize.body.sm,
        fontWeight: system.fontWeight.normal,
        fontFamily: system.fontFamily.default,
      }}
    >
      Text styled using cs props
    </Text>
    <Text as="p" cs={{...system.type.subtext.lg}}>
      Text styled using type token level
    </Text>
    <Box cs={{...system.type.subtext.lg, color: system.color.fg.muted.default}}>
      <Text>Text with inherited styles</Text>
    </Box>
  </Box>
);

Type Level and Variant

Text includes built-in support for Canvas type tokens via the typeLevel and variant props.

typeLevel hooks into the Canvas type hierarchy.

Small Body level text

import React from 'react';

import {Text} from '@workday/canvas-kit-react/text';

export default () => (
  <Text as="p" typeLevel="body.small">
    Small Body level text
  </Text>
);

variant allows you to layer additional styling to aid users’ understanding of the text being rendered.

Error text

import React from 'react';

import {Text} from '@workday/canvas-kit-react/text';

export default () => (
  <Text as="p" variant="error">
    Error text
  </Text>
);

Custom Styles

Text supports custom styling via the cs prop. For more information, check our “How To Customize Styles” .

Component API

Text

This is a generic base component intended to render any text. It has typeLevel and variant style props that simplify navigating our type hierarchy and using Canvas type tokens. By default, it renders a semantic span element, but you can adjust this as needed with the as prop.

The type hierarchy is organized into four levels, which correspond to our Canvas type levels.

title: Intended to be used for large page titles.
heading: Intended to be used for headings and large text.
body: Intended to be used for standard body text.
subtext: Intended to be used for small subtext content or in tight spaces.

Each level has three sizes: large, medium, and small.

You can provide any level and size to the typeLevel prop, and it will apply the correct styles accordingly. In the example below we're providing the subtext level and small size to the component with the value subtext.small.


import { Text } from '@workday/canvas-kit-react/text';

const CustomErrorText = () => (
  <Text typeLevel="subtext.small" variant="error">
    Error Text
  </Text>
);

Layout Component

Text supports all props from thelayout component.

Props

Props extend from span. Changing the as prop will change the element interface.

Name	Type	Description	Default
`typeLevel`	`'title.large' \| 'title.medium' \| 'title.small' \| 'heading.large' \| 'heading.medium' \| 'heading.small' \| 'subtext.large' \| 'subtext.medium' \| 'subtext.small' \| 'body.large' \| 'body.medium' \| 'body.small'`	Type token as string with level and size separated by dot. These values map to our Canvas type levels. `<Text typeLevel="body.small">Small body text</Text>`
`variant`	`'error' \| 'hint' \| 'inverse'`	Type variant token names: `error`, `hint` or `inverse`. `<Text variant="error" typeLevel="subtext.large">Error text</Text>`
`cs`		The `cs` prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using `cs`, you can merge that prop in as well. Any style that is passed to the `cs` prop will override style props. If you wish to have styles that are overridden by the `css` prop, or styles added via the `styled` API, use wherever `elemProps` is used. If your component needs to also handle style props, use instead. import {handleCsProp} from '@workday/canvas-kit-styling'; import {mergeStyles} from '@workday/canvas-kit-react/layout'; // ... // `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same // function signature, but adds support for style props. return ( <Element {...handleCsProp(elemProps, [ myStyles, myModifiers({ size: 'medium' }), myVars({ backgroundColor: 'red' }) ])} > {children} </Element> )
`children`	`ReactNode`
`as`	`React.ElementType`	Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef`and spread extra props to a root element. Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.	`span`
`ref`	`React.Ref<R = span>`	Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).