Motiva
Мои коллекции
← каталог

Button Styles

Инвентарь кнопок для билдера: ВИД (solid, outline, ghost, soft, gradient, glow) и ДВИЖЕНИЕ (lift, press, блик, заливка слева, стрелка) — независимые оси, любая пара легальна. Чистый CSS, focus-visible получает то же движение, что и hover.

csshoverclickbasicreduced-motion ✓
↗

Пропсы

Разобрано из кода записи: обязательные — без «?», у остальных показано значение по умолчанию.

ПропТипПо умолчаниюЧто это
variant?ButtonVariant"solid"Вид: solid | outline | ghost | soft | gradient | glow.
motion?ButtonMotion"lift"Движение по наведению: none | lift | press | sheen | fill | arrow.
childrenReactNode—

Установка

npx shadcn@latest add https://motiva.pages.dev/r/button-styles.json
Что нужно в проекте до установки

  1. Файл components.json в корне

    Из него CLI узнаёт, куда класть файлы. Алиасы — в такой форме:

    "aliases": { "components": "@/components", "lib": "@/lib" }

    Нет файла — установка не начнётся вовсе.

  2. Алиас @ объявлен дважды

    В корневом tsconfig.json и в конфиге сборщика. В Vite корневой tsconfig часто содержит только references — этого мало.

    "paths": { "@/*": ["./src/*"] }        // tsconfig.json
resolve.alias = { "@": "/src" }        // vite.config.ts

    Без paths CLI молча создаёт папку с именем @.

  3. Токены подключены один раз на приложение

    Они приезжают вместе с записью — достаточно импортировать их в точке входа:

    import "@/styles/motiva-tokens.css";

    Без них блок потеряет цвета, ритм и тему.

  4. Своя типографика не спорит с блоком

    Наследуемые свойства протекают внутрь: text-align: center на обёртке отцентрует содержимое секции. То же касается font-familyи line-height.

  5. Проект без TypeScript? всё равно нужен tsconfig

    CLI грузит tsconfig.json безусловно, а при "tsx": false идёт за jsconfig.json и падает так же. Минимум — файл с pathsи "tsx": true в components.json.

    Приехавший рядом .tsx можно не трогать — вам нужен .vanilla.js.

Экспорт

↓ Скачать .zip

Код

import type { ButtonHTMLAttributes, ReactNode } from "react";
import "./button-styles.css";

export type ButtonVariant = "solid" | "outline" | "ghost" | "soft" | "gradient" | "glow";
export type ButtonMotion = "none" | "lift" | "press" | "sheen" | "fill" | "arrow";

export interface StyledButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  /** Вид: solid | outline | ghost | soft | gradient | glow. */
  variant?: ButtonVariant;
  /** Движение по наведению: none | lift | press | sheen | fill | arrow. */
  motion?: ButtonMotion;
  children: ReactNode;
}

/**
 * Инвентарь кнопок для билдера: ВИД и ДВИЖЕНИЕ — две независимые оси, любая пара легальна.
 * Вся анимация в CSS (transform/opacity + цвета), состояния focus-visible получают то же
 * движение, что и hover, — клавиатура не хуже мыши. Токены с фолбэком: с дизайн-системой
 * кнопка слушается темы, без неё продолжает работать.
 */
export function ButtonStyles({ variant = "solid", motion = "lift", children, className, ...props }: StyledButtonProps) {
  return (
    <button
      className={["msb", `msb--${variant}`, motion !== "none" ? `msb-m--${motion}` : "", className ?? ""]
        .filter(Boolean)
        .join(" ")}
      {...props}
    >
      {children}
      {motion === "arrow" && (
        <span className="msb-tail" aria-hidden="true">
          →
        </span>
      )}
    </button>
  );
}

Похожие эффекты

вариант
Link Stylesreact·css
вариант
Shimmer Buttoncss·react
вариант
Ripple Buttoncss·react
вариант
Magnetic Buttonreact·ts·css·js
Border Beamcss·react
Expanding Panelsreact
лицензия: MITавтор: Motivaисточник: оригинал (Motiva)v1.0.0