Text

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

GitHubStorybook
yarn add @workday/canvas-kit-react
Sources
GitHubStorybook
Install
yarn add @workday/canvas-kit-react

Usage Guidance

Coming soon!

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 style props

Text styled using type token level

Text with inherited styles

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

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

Error text

Props

Text is built on top of Box and supports all of its props in addition to its own.

NameTypeDefaultDescription
typeLevel"body.small" | "body.large" | "body.medium" | "title.small" | "title.large" | "title.medium" | "heading.small" | "heading.large" | "heading.medium" | "subtext.small" | "subtext.large" | "subtext.medium" | undefinedType token as string with level and size separated by dot. These values map to our [Canvas type levels](https://canvas.workday.com/tokens/type#type-styles). @example ```tsx <Text typeLevel="body.small">Small body text</Text> ```
variantkeyof CanvasTypeVariants | undefinedType variant token names: `error`, `hint` or `inverse`. @example ```tsx <Text variant="error" typeLevel="subtext.large">Error text</Text> ```

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section