Label

1"use client";
2 
3import { mergeProps } from "@base-ui/react/merge-props";
4import { useRender } from "@base-ui/react/use-render";
5import type React from "react";
6import { cn } from "@/lib/utils";
7 
8export function Label({
9  className,
10  render,
11  ...props
12}: useRender.ComponentProps<"label">): React.ReactElement {
13  const defaultProps = {
14    className: cn(
15      // Same recipe as FieldLabel so a standalone <Label> and a
16      // Field-compound label read at identical weight (button-14 = 500).
17      "inline-flex items-center gap-2 text-small font-medium text-ink",
18      className,
19    ),
20    "data-slot": "label",
21  };
22 
23  return useRender({
24    defaultTagName: "label",
25    props: mergeProps<"label">(defaultProps, props),
26    render,
27  });
28}