Раздел в storybook
Для сборки кнопки нужно импортировать её себе в компонент, расширив при необходимости её возмжности и внедрив свои стили. Базовый шаблон внедрения представлен ниже.
import { Button, type ButtonProps } from 'blanc-ui/react'
import { myButtonStyle, myButtonVariants } from './styles.css'
export const MyButton: FC<ButtonProps> = ({children, ...props}) => (
<Button
style={myButtonStyle}
variants={myButtonVariants}
{...props}
>{children}</Button>
)
| Свойство | Типы | default | Описание |
|---|
ref | HTMLButtonElement | null | Референс на DOM элемент |
variant | primary, secondary, outlined, clean | primary | Вариант отображения дизайна |
size | small, medium, large | medium | Размер |
active | boolean | false | Состояние кнопки в прожатом действующем состоянии |
disabled | boolean | false | Состояние кнопки в отключённом, недоступном для нажатия состоянии |
groupKey | string, number, undefined | undefined | Ключ кнопки, нужен при применении в группе, для автоматической установки активного состояния, если у группы есть свойство value |
| Слот | Тип | Описание |
|---|
children | ReactNode | Базовый центральный слот |
| Название | Аргументы | Описание |
|---|
onClick | SyntheticEvent<Element> | Клик по кнопке, не исполнится если установлен disabled |