Компоненты
Button
Кнопка с вариантами, размерами и состоянием загрузки.
Кнопка с вариантами оформления, размерами, иконкой и состоянием загрузки. Всё остальное — обычные атрибуты <button>.
Варианты
import { Button } from "@toimetdev/pathlogs-core";
<Button variant="primary">Основная</Button>
<Button variant="secondary">Вторичная</Button>
<Button variant="ghost">Призрачная</Button>
<Button variant="danger">Удалить</Button>
<Button variant="gradient">Градиент</Button>Размеры
<Button size="sm">Маленькая</Button>
<Button size="md">Средняя</Button>
<Button size="lg">Большая</Button>Загрузка
loading показывает крутилку, блокирует кнопку и проставляет aria-busy. Подпись при этом лучше менять на глагол несовершенного вида — «Сохраняем» вместо «Сохранить»:
<Button variant="primary" loading={pending}>
{pending ? "Сохраняем" : "Сохранить"}
</Button>Крутилка наследует цвет текста, поэтому одинаково читается на всех вариантах — своего цвета ей не нужно.
Пропсы
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
variant | "primary" | "secondary" | "ghost" | "danger" | "gradient" | "secondary" | Оформление. |
size | "sm" | "md" | "lg" | "md" | Размер. |
loading | boolean | false | Крутилка вместо иконки, кнопка заблокирована. |
icon | ReactNode | — | Иконка слева от подписи. |
block | boolean | false | Занять всю ширину контейнера. |
… | ButtonHTMLAttributes | — | Всё остальное уходит на <button>: onClick, disabled, form, aria-*. |
variant"primary" | "secondary" | "ghost" | "danger" | "gradient"по умолчанию: "secondary"
Оформление.
size"sm" | "md" | "lg"по умолчанию: "md"
Размер.
loadingbooleanпо умолчанию: false
Крутилка вместо иконки, кнопка заблокирована.
iconReactNodeИконка слева от подписи.
blockbooleanпо умолчанию: false
Занять всю ширину контейнера.
…ButtonHTMLAttributesВсё остальное уходит на <button>: onClick, disabled, form, aria-*.
Компонент пробрасывает ref — его можно сфокусировать программно или передать в свою логику позиционирования.