Body Text
Body Text provides a simple way to render body-level text with built-in support for Canvas type tokens.
Usage Guidance
Coming soon!
Examples
Basic Example
BodyText
is a Type Level component (along with Title
,
Heading
, and Subtext
) built on top of
Text
which provides a simple way to render body-level text according to
the Canvas type hierarchy.
BodyText
renders a <p>
element by default with styles equivalent to type.levels.body[size]
.
You may override the rendered element using the as
prop.
Large Body Text
Medium Body Text
Small Body Text
Component API
BodyText
This component is intended to be used for standard body text.
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: 20px (1.25rem)
- font-weight: regular (400)
medium
- font-size: 18px (1.125rem)
- font-weight: regular (400)
small
- font-size: 16px (1rem)
- font-weight: regular (400)
import { BodyText } from '@workday/canvas-kit-react/text';const CustomBodyText = () => (<BodyText size="small">Body Text</BodyText>);
Layout Component
BodyText
supports all props from thelayout component.
Props
Props extend from p. Changing the as
prop will change the element interface.
Name | Type | Description | Default |
---|---|---|---|
size | 'large' |Â 'medium' |Â 'small' | Each type level has three sizes: | |
variant | keyof | Type variant token names:
| |
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 Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care. | p |
ref | React.Ref | Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If |
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.
FAQ Section