@workday/canvas-kit-docs/dist/mdx/react/text/LabelText.mdx

Documentation components of Canvas Kit components

import {ExampleCodeBlock, StorybookStatusIndicator, SymbolDoc} from '@workday/canvas-kit-docs';
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
import Basic from './examples/LabelText/Basic';
import Cursor from './examples/LabelText/Cursor';
import Disabled from './examples/LabelText/Disabled';

# Canvas Kit Label Text <StorybookStatusIndicator type="deprecated" />

<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
  <InformationHighlight.Icon />
  <InformationHighlight.Body>
    `LabelText` has been deprecated and will be removed in a future major version. Please use
    `FormField.Label` instead.
  </InformationHighlight.Body>
  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/story/components-inputs-form-field--docs">
    Form Field Docs
  </InformationHighlight.Link>
</InformationHighlight>

`LabelText` provides a simple way to render a label with built-in support for Canvas type tokens.

## Installation

```sh
yarn add @workday/canvas-kit-react
```

## Usage

### Basic Example

`LabelText` renders a `<label>` element. This component is deprecated in favor of `FormField.Label`
since it should be used in tandem with form elements.

<ExampleCodeBlock code={Basic} />

### Cursor

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

<ExampleCodeBlock code={Cursor} />

### Disabled

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

<ExampleCodeBlock code={Disabled} />

## Component API

<SymbolDoc name="LabelText" fileName="/react/text/" />