Урок 18. Теория: разбор Button построчно

Часть 1. Импорты

// src/components/ui/button.tsx
import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { cva, type VariantProps } from "class-variance-authority"

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

Три строки — три слоя, о которых шла речь в уроке 16: поведение (примитив), варианты (cva), слияние классов (cn). Больше компоненту ничего не нужно.

Часть 2. Базовые классы

const buttonVariants = cva(
  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent \
   bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none \
   focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 \
   active:not-aria-[haspopup]:translate-y-px \
   disabled:pointer-events-none disabled:opacity-50 \
   aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 \
   dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 \
   [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  { /* варианты ниже */ }
)

Разберём по группам:

Часть 3. Варианты и размеры

{
  variants: {
    variant: {
      default: "bg-primary text-primary-foreground hover:bg-primary/80",
      outline:
        "border-border bg-background hover:bg-muted hover:text-foreground \
         aria-expanded:bg-muted dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
      secondary: "bg-secondary text-secondary-foreground aria-expanded:bg-secondary",
      ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50",
      destructive:
        "bg-destructive/10 text-destructive hover:bg-destructive/20 \
         focus-visible:border-destructive/40 focus-visible:ring-destructive/20",
      link: "text-primary underline-offset-4 hover:underline",
    },
    size: {
      default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
      xs: "h-6 gap-1 px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
      sm: "h-7 gap-1 px-2.5 text-[0.8rem] [&_svg:not([class*='size-'])]:size-3.5",
      lg: "h-9 gap-1.5 px-2.5",
      icon: "size-8",
      "icon-sm": "size-7",
      "icon-lg": "size-9",
    },
  },
  defaultVariants: {
    variant: "default",
    size: "default",
  },
}

Обратите внимание на два момента.

Первое: только семантические токены. Ни одного bg-slate-900 — везде bg-primary, text-primary-foreground, bg-destructive/10. Благодаря этому смена темы не требует правки компонента (урок 19).

Второе: размеры знают про иконки. Класс has-data-[icon=inline-end]:pr-2 уменьшает правый отступ, если внутри есть иконка, помеченная data-icon="inline-end". Мелочь, но именно из таких мелочей складывается ощущение аккуратности.

<div class="flex flex-wrap items-center gap-3">
  <button class="inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-primary px-2.5 text-sm font-medium whitespace-nowrap text-primary-foreground transition-all hover:bg-primary/80">Default</button>
  <button class="inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-border bg-background px-2.5 text-sm font-medium whitespace-nowrap transition-all hover:bg-muted">Outline</button>
  <button class="inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-secondary px-2.5 text-sm font-medium whitespace-nowrap text-secondary-foreground transition-all">Secondary</button>
  <button class="inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent px-2.5 text-sm font-medium whitespace-nowrap transition-all hover:bg-muted">Ghost</button>
  <button class="inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-lg border border-transparent bg-destructive/10 px-2.5 text-sm font-medium whitespace-nowrap text-destructive transition-all hover:bg-destructive/20">Destructive</button>
  <button class="inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-medium whitespace-nowrap text-primary underline-offset-4 transition-all hover:underline">Link</button>
</div>

<div class="flex flex-wrap items-center gap-3">
  <button class="inline-flex h-6 items-center justify-center rounded-lg bg-primary px-2 text-xs font-medium text-primary-foreground">xs</button>
  <button class="inline-flex h-7 items-center justify-center rounded-lg bg-primary px-2.5 text-[0.8rem] font-medium text-primary-foreground">sm</button>
  <button class="inline-flex h-8 items-center justify-center rounded-lg bg-primary px-2.5 text-sm font-medium text-primary-foreground">default</button>
  <button class="inline-flex h-9 items-center justify-center rounded-lg bg-primary px-2.5 text-sm font-medium text-primary-foreground">lg</button>
  <button class="inline-flex size-8 items-center justify-center rounded-lg bg-primary text-sm font-medium text-primary-foreground">★</button>
</div>

Часть 4. Сам компонент

function Button({
  className,
  variant = "default",
  size = "default",
  ...props
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
  return (
    <ButtonPrimitive
      data-slot="button"
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }

Четыре детали, каждая из которых важна:

1. data-slot="button" — метка части. По ней другие компоненты стилизуют вложенные кнопки (has-data-[slot=button]:…), а тесты находят элемент независимо от классов.
2. ButtonPrimitive.Props — типы приходят от примитива: компонент принимает всё, что принимает <button>, плюс возможности примитива.
3. VariantProps<typeof buttonVariants> — типы вариантов выводятся автоматически: добавили вариант в cva — он тут же появился в подсказках редактора.
4. className внутри buttonVariants({…}) — тонкий момент: cva принимает className последним аргументом и передаёт его в cn(), поэтому внешние классы побеждают.

Полиморфизм: проп render

Часто нужно, чтобы кнопка была ссылкой — визуально кнопка, семантически <a>. В Base UI это делает проп render:

<Button render={<a href="/reports" />}>Открыть отчёты</Button>

Примитив «сливает» свои пропсы и классы с переданным элементом. В старых версиях shadcn/ui на Radix ту же задачу решал asChild:

// старый API (Radix)
<Button asChild>
  <a href="/reports">Открыть отчёты</a>
</Button>

Приёмы, которые встретятся в других компонентах

Разберём фрагмент карточки — там используются две конструкции, которых не было в кнопке:

// src/components/ui/card.tsx — фрагмент
function Card({ className, size = "default", ...props }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
  return (
    <div
      data-slot="card"
      data-size={size}
      className={cn(
        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card \
         py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 \
         [--card-spacing:--spacing(4)] \
         has-data-[slot=card-footer]:pb-0 \
         data-[size=sm]:[--card-spacing:--spacing(3)]",
        className
      )}
      {...props}
    />
  )
}

• [--card-spacing:--spacing(4)] — компонент объявляет собственную переменную и дальше использует её в py-(--card-spacing). Скобки (…) — короткая запись для var(…). Смысл: поменяли одну переменную — изменились все отступы карточки согласованно.
• has-data-[slot=card-footer]:pb-0 — карточка убирает нижний отступ, если внутри есть футер. Родитель подстраивается под содержимое без единой строки JavaScript.
• data-[size=sm]:[--card-spacing:--spacing(3)] — компактный размер меняет ту же переменную, а не переписывает все отступы.

Как читать незнакомый компонент

1. Найдите импорт примитива — он подскажет, какое поведение вы получаете.
2. Пробегите базовые классы cva: геометрия, фокус, состояния.
3. Посмотрите список вариантов — это и есть публичный API компонента.
4. Найдите data-slot у каждой части — по ним устроена связь между частями.
5. Только потом читайте детали вроде произвольных селекторов.