Skip to main content
Bedrock Design System

Label Text

A typography component to render a label.

UsagePermalink to: Usage

Label Text is a typography that is used to display labels on a page, usually - but not limited to - form labels.

It will render as a <label> element as default, but should be changed to any other element or React component with the as prop if used outside of a form.

When to usePermalink to: When to use

  • Use it to indicate a label for something, eg. a form element

When not to usePermalink to: When not to use

  • Do not use it for headings
  • Do not use it for bodies of text

AccessibilityPermalink to: Accessibility

When using the Label Text with a form element, use the htmlFor="form_element_id". This will make sure that the form element is focused when the Label Text is clicked, and that it will have a accessible name for assistive technologies:

<LabelText htmlFor="first_name">First name</LabelText>
<input type="text" id="first_name" />

For any other use case outside a form, the for attribute should not be used. Instead render as a regular text element, eg. a <p> or <span>:

<LabelText as="span">A label</LabelText>
<BodyText>A description</BodyText>

ExamplesPermalink to: Examples

Text colorPermalink to: Text color

The textColor prop controls the color of the text.

Open
import { LabelText } from "@peakon/bedrock/react/typography";
import { Stack } from "@peakon/bedrock/react/layout";

function Snippet() {
  return (
    <Stack spacing={8}>
      <LabelText as="span" textColor="heading">
        Heading color
      </LabelText>
      <LabelText as="span" textColor="body">
        Body color (default)
      </LabelText>
      <LabelText as="span" textColor="hint">
        Hint color
      </LabelText>
      <LabelText as="span" textColor="disabled">
        Disabled color
      </LabelText>
      <div style={{ backgroundColor: "black", padding: "8px" }}>
        <LabelText as="span" textColor="inverted">
          Inverted color
        </LabelText>
      </div>
      <LabelText as="span" textColor="inherit">
        Inherit color (from parent)
      </LabelText>
    </Stack>
  );
}

Text alignmentPermalink to: Text alignment

Text will inherit text alignment from their parent, but can be overwritten with the textAlign prop.

Open
import { LabelText } from "@peakon/bedrock/react/typography";

function Snippet() {
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <LabelText textAlign="start">Label aligned to start</LabelText>
      <LabelText textAlign="center">Label aligned center</LabelText>
      <LabelText textAlign="end">Label aligned to end</LabelText>
    </div>
  );
}

SizePermalink to: Size

The size prop controls the size of the label text.

Open
import { LabelText } from "@peakon/bedrock/react/typography";
import { Stack } from "@peakon/bedrock/react/layout";

function Snippet() {
  return (
    <Stack spacing={8}>
      <LabelText>Medium label (default)</LabelText>
      <LabelText size="small">Small label</LabelText>
    </Stack>
  );
}

As another elementPermalink to: As another element

Open
import { LabelText } from "@peakon/bedrock/react/typography";

function Snippet() {
  return <LabelText as="span">Label rendered as a HTML Span Element</LabelText>;
}

Props TablePermalink to: Props Table

Props extend from HTML Label Element(external link), with the omission of className and style

NameTypeDescriptionDefaultRequired
refany

Forwards a ref to the Label Text.

—No
asHTMLElement | ReactNode

What to render the Label Text as.

labelNo
textAlignstart | center | end

How the text should align (will inherit as default).

—No
textColorinherit | heading | body | hint | inverted | disabled

Controls the color of the text.

bodyNo
sizesmall | medium

Controls the size of the label text.

mediumNo