@elcrm/button

React-кнопка для elCRM: варианты оформления, размеры, слоты до/после и режим ожидания onSend.

Стили — CSS Modules; значения токенов задаёт тема приложения (theme.css, theme-light.css, theme-dark.css). Fallback в пакете нет.

Установка

npm install @elcrm/button
# или
bun add @elcrm/button

Требования: Node.js ≥ 18 · peer: react ≥ 18, react-dom ≥ 18.

Быстрый старт

import { Button } from "@elcrm/button";
// CSS подтягивается с чанками; при необходимости:
// import "@elcrm/button/style.css";

export function Example() {
  return (
    <Button
      variant="primary"
      size="m"
      width="m"
      label="Отправить"
      onClick={() => console.log("click")}
    />
  );
}

Точечный импорт:

import { Button } from "@elcrm/button/Button";
import { IconButton } from "@elcrm/button/IconButton";

IconButton

Квадратная кнопка только с иконкой. label обязателен → aria-label. Имя иконки + tooltip — @elcrm/components IconButton.

import { IconButton } from "@elcrm/button/IconButton";

<IconButton
  label="Выход"
  icon={<Icons.Line name="power" size={18} />}
  onClick={logout}
/>

Props

Внешний вид

• variant — primary · secondary · positive · negative · ghost
  По умолчанию: primary
• size — s · m · l (токены --button-size-*)
  По умолчанию: m
• width — s по контенту · m с min-width · l на всю ширину
  По умолчанию: m
• disabled — нативный disabled на <button>
  По умолчанию: false
• className — доп. CSS-класс
• ref — ref на DOM-элемент <button>

Контент

• label — текст или элемент, если нет children
• children — основной контент (приоритет над label / before / after)
• before / after — слоты слева и справа от label (игнорируются при children)

Клики и ожидание

• onClick(event) — обычный клик. Если задан, onSend не вызывается
• onSend(setDisabled, event) — асинхронный сценарий:
  • синхронный false — не входить в pending;
  • промис / async — pending до settle (resolve или reject);
  • синхронный void — снимите pending через setDisabled(false)
• enter — глобальный Enter = клик по кнопке (onClick / onSend); не срабатывает в textarea / contenteditable
  По умолчанию: false
• pendingContent — что показать во время ожидания
  По умолчанию: "Ожидайте..."
• pendingAriaLabel — aria-label в режиме ожидания (нужен, если pendingContent не строка)

Форма

• buttonType — нативный type: button · submit · reset
  По умолчанию: button

Плюс остальные нативные атрибуты кнопки: aria-*, title, data-*, tabIndex, form, …

Пример с onSend

<Button
  label="Сохранить"
  onSend={async (_done, event) => {
    if (!event.currentTarget.form?.checkValidity()) return false;
    await save();
  }}
  pendingContent="Сохранение…"
/>

Токены

Значения задаёт тема приложения:

• геометрия и тени без цвета — theme.css
• цвета — theme-light.css / theme-dark.css

| Группа | Примеры | | ------ | ------- | | Геометрия | --button-height, --button-padding, --button-radius, --button-gap, --button-min-width-m | | Размер шрифта | --button-size-s, --button-size-m, --button-size-l | | Варианты | --button-primary-bg, --button-primary-fg, --button-secondary-*, --button-positive-*, --button-negative-*, --button-ghost-* | | Hover / active | --button-primary-hover-bg, --button-primary-active-bg, … | | Disabled / await | --button-disabled-bg, --button-disabled-fg, --button-await-bg, --button-await-fg | | Фокус | --button-focus-ring, --button-focus-ring-offset |

Лицензия

MIT © MaSkal