Label роль

Описание

Label — это маленькая, утилитарная роль, используемая для таких вещей, как текст внутри компонентов или для очень маленького текста в основной части содержимого, например для подписей.

Кнопки, например, используют крупный стиль label.

Label styles should enable quick reading at small sizes, such as in buttons

Label роль должна обеспечивать быстрое и удобное чтение на небольших размерах, например на кнопках.

A music player using label style for the timecode

Музыкальный плеер, использующий label для таймкода

A navigation bar using label style for the destination text

Navigation Bar использующий label в качестве текста к ссылкам

Примеры

Label large

font-size: 14px

line-height: 20px

letter-spacing: 0.1px

font-weight: 500

Label medium

font-size: 12px

line-height: 16px

letter-spacing: 0.5px

font-weight: 500

Label small

font-size: 11px

line-height: 16px

letter-spacing: 0.5px

font-weight: 500

Компонент

Скопируйте и вставьте код в свой проект.

Можно сохранить компонент в файл src/shared/typography/Label.tsx:

import React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/cn"

export const labelVariants = cva("text-inherit", {
  variants: {
    size: {
      large: "text-sm tracking-[0.1px] font-medium",
      medium: "text-xs tracking-[0.5px] font-medium",
      small: "text-[11px] leading-4 tracking-[0.5px] font-medium",
    },
  },
  defaultVariants: {
    size: "medium",
  },
})

interface LabelProps
  extends VariantProps<typeof labelVariants>,
    React.HTMLAttributes<HTMLSpanElement> {}

const Label = React.forwardRef<HTMLSpanElement, LabelProps>(
  ({ children, size, className, ...props }, forwardedRef) => {
    return (
      <span
        className={cn(labelVariants({ size }), className)}
        {...props}
        ref={forwardedRef}
      >
        {children}
      </span>
    )
  }
)
Label.displayName = "Label"

export default Label

Использование

import Label from "@/components/typography/Label"

{/* Большой */}
<Label size="large">Label large</Label>
{/* Средний */}
<Label size="medium">Label medium</Label>
{/* или без указания size (medium по умолчанию) */}
<Label>Label medium</Label>
{/* Маленький */}
<Label size="small">Label small</Label>

Кастомизация

Подходя к Label у меня закончились идеи по кастомизации, поэтому ловите набор разноцветных слов.

(R)ed(G)reen(B)lue