Label Text

Label Text provides a simple way to render a label 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

LabelText is built on top of Text and renders a <label> element.

Cursor

Set the cursor prop to render a particular cursor when the mouse pointer is hovering over the label.

Disabled

Set the disabled prop to provide a visual cue that the label and its associated element are disabled.

Props

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

NameTypeDefaultDescription
cursorCursor | undefinedsets [CSS cursor property](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor)
disabledboolean | undefined
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