Button
Действие или ссылка с размером, цветом, темой и состоянием загрузки.
Для действия используйте onClick, для перехода — href. loading показывает выполнение операции; disabled блокирует действие.
Живой пример
Настройки примера
Использование
import { Button } from '@prosazhin/pbcomponents';
<Button
size='m'
theme='filled'
color='primary'
>
Button
</Button>;API компонента
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
children | string | Содержимое компонента. | — |
size | 'xs' | 's' | 'm' | 'l'xs · s · m · l | Размер компонента. | m |
theme | 'filled' | 'light' | 'border' | 'ghost'filled · light · border · ghost | Оформление кнопки. | filled |
color | 'primary' | 'secondary' | 'success' | 'danger'primary · secondary · success · danger | Смысловой цвет. | primary |
disabled | boolean | Блокирует взаимодействие. | false |
loading | boolean | Показывает процесс выполнения. | false |
leftIcon | SvgTypenone · check · search · user | Иконка перед текстом; принимает SVG-компонент. | — |
rightIcon | SvgTypenone · check · search · user | Иконка после текста; принимает SVG-компонент. | — |
leftIconClassName | string | Класс левой иконки. | — |
rightIconClassName | string | Класс правой иконки. | — |
onClick | (event) => void | Обработчик нажатия. | — |
href | string | Рендерит ссылку вместо кнопки. | — |
linkComponent | ElementType | Компонент ссылки, например Next.js Link. | — |
target | '_self' | '_blank'_self · _blank | Где открыть ссылку. | _self |
type | 'button' | 'reset' | 'submit'button · reset · submit | Тип HTML-кнопки. | button |
className | string | Класс корневого элемента. | — |
textClassName | string | Класс текстовой части. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.