Design System Builder

Label

Label is a component component that provides label functionality.

Active

Installation

npm install @your-design-system/label
import { Label } from "@/components/ui/label"

export function LabelDemo() {
  return (
    <Label children={"children"}>
      {/* Content */}
    </Label>
  )
}

API Reference

PropTypeDefaultDescription
children*string-

The content to display inside the component.

htmlForstring-

The htmlFor prop for the component.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

text-smfont-mediumleading-nonepeer-disabled:cursor-not-allowedpeer-disabled:opacity-70

Design System Compliance

This component is validated against atomic design principles and foundation token usage.