AR 15 M4
c1731615ab
Анализ CSS сайта (style.css темы clinic_bootstrap_mobile) выявил 4 реальных типа кнопок — заменены ранее придуманные варианты: - primary → коралловый #FFA39C + shadow (форм-сабмит «Запишите меня!») - outline → белый + бежевая рамка #BF9975 («Записаться на прием») - teal → бирюзовый #60959c («Позвонить») - pill → кремовый #e9e4d4 + radius 25px («Заказать звонок») Удалены: secondary, ghost, danger (не существуют на реальном сайте) Добавлен раздел «CSS с сайта» с точными значениями Добавлена таблица «Где применяется» с реальными CSS-классами сайта LLM-блок обновлён до v2.0 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { ButtonHTMLAttributes, forwardRef } from "react";
|
|
|
|
export type ButtonVariant = "primary" | "outline" | "teal" | "pill";
|
|
export type ButtonSize = "sm" | "md" | "lg";
|
|
|
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: ButtonVariant;
|
|
size?: ButtonSize;
|
|
loading?: boolean;
|
|
}
|
|
|
|
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
|
function Button(
|
|
{ variant = "primary", size = "md", loading = false, disabled, children, className = "", ...props },
|
|
ref
|
|
) {
|
|
const isDisabled = disabled || loading;
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
disabled={isDisabled}
|
|
className={`bb-btn bb-btn-${size} bb-btn-${variant} ${className}`.trim()}
|
|
{...props}
|
|
>
|
|
{loading && (
|
|
<span
|
|
style={{
|
|
width: 13,
|
|
height: 13,
|
|
border: "2px solid currentColor",
|
|
borderTopColor: "transparent",
|
|
borderRadius: "50%",
|
|
display: "inline-block",
|
|
animation: "bb-spin 0.65s linear infinite",
|
|
flexShrink: 0,
|
|
}}
|
|
/>
|
|
)}
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|
|
);
|