Label

A label is a primitive component matching Hopper's typography type scale.

AI Tip Want to skip the docs? Use the MCP Server

Usage

Color

The label component has a default color, but it can be easily overridden.

Required

The label component can be marked as required. You can customize the necessity indicator by using an asterisk.

Optional

The label component can show the optional necessity indicator as a label.

Props

style?
className?
render?

Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.

Requirements:

  • You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>).
  • Only a single root DOM element can be rendered (no fragments).
  • You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
elementType?