Subtext

Subtext provides a simple way to render subtext-level text with 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

Subtext is a Type Level component (along with Title, Heading, and BodyText) built on top of Text which provides a simple way to render subtext-level text according to the Canvas type hierarchy.

Subtext renders a <p> element by default with styles equivalent to type.levels.subtext[size]. You may override the rendered element using the as prop.

Large Subtext

Medium Subtext

Small Subtext

Component API

Subtext

This component is intended to be used for small subtext content or in tight spaces. By default, it renders a semantic p element, but you can adjust this as needed with the as prop. It has three sizes: large, medium, and small. Here's a quick reference for font-sizes and weights:

  • large
    • font-size: 14px (0.875rem)
    • font-weight: regular (400)
  • medium
    • font-size: 12px (0.75rem)
    • font-weight: regular (400)
  • small
    • font-size: 10px (0.625rem)
    • font-weight: regular (400)
import { Subtext } from '@workday/canvas-kit-react/text';


const CustomSubtext = () => (
  <Subtext size="small">Subtext</Subtext>
);

Layout Component

Subtext supports all props from thelayout component.

Props

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

NameTypeDescriptionDefault
size 'large' | 'medium' | 'small'

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

variantkeyof

Type variant token names: error, hint or inverse.

<Text variant="error" typeLevel="subtext.large">Error text</Text>
childrenReactNode
asReact.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.forwardRefand 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.

p
refReact.Ref

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

Can't Find What You Need?

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

FAQ Section