Кнопка
- Использование
- Свойства
import { Button } from "@/ui/input/button/components/Button";
export const MyComponent = () => {
return (
<Button
className
Icon={null}
title="Title"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="default"
soon={false}
disabled={false}
focus={true}
onClick={() => console.log("click")}
/>
);
};
| Свойства | Тип | Описание |
|---|---|---|
| className | строка | Дополнительное имя класса для дополнительной стилизации |
| Иконка | React.ComponentType | Необязательный компонент иконки, отображаемый на кнопке |
| заголовок | строка | Текстовое содержимое кнопки |
| полнаяШирина | логическое | Определяет, должна ли кнопка занимать всю ширину контейнера |
| вариант | строка | Визуальный стиль кнопки. Включает опции primary, secondary и tertiary |
| размер | строка | Размер кнопки. Есть два варианта: small и medium |
| позиция | строка | Положение кнопки по отношению к соседним элементам. Опции включают: standalone, left, right и middle |
| акцент | строка | Акцентный цвет кнопки. Включает опции: default, blue, и danger |
| скоро | булево | Указывает, отмечена ли кнопка как «скоро» (например, для предстоящих функций) |
| отключено | булево | Определяет, отключена кнопка или нет |
| фокус | булево | Определяет, имеет ли кнопка фокус |
| onClick | функция | Функция обратного вызова, которая срабатывает при нажатии пользователем на кнопку |
Группа кнопок
- Использование
- Свойства
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";
export const MyComponent = () => {
return (
<ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
</ButtonGroup>
);
};
| Свойства | Тип | Описание |
|---|---|---|
| вариант | строка | Визуальный вариант оформления кнопок в группе. Включает опции primary, secondary, и tertiary |
| размер | строка | Размер кнопок в группе. Имеет два варианта: medium и small |
| акцент | строка | Акцентный цвет кнопок в группе. Включает опции default, blue и danger |
| className | строка | Дополнительное имя класса для дополнительной стилизации |
| children | ReactNode | Массив элементов React, представляющих отдельные кнопки в группе |
Плавающая кнопка
- Использование
- Свойства
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";
export const MyComponent = () => {
return (
<FloatingButton
className
Icon={IconSearch}
title="Title"
size="medium"
position="standalone"
applyShadow={true}
applyBlur={true}
disabled={false}
focus={true}
/>
);
};
| Свойства | Тип | Описание |
|---|---|---|
| className | строка | Необязательное имя для дополнительной стилизации |
| Иконка | React.ComponentType | Необязательный компонент иконки, отображаемый на кнопке |
| заголовок | строка | Текстовое содержимое кнопки |
| размер | строка | Размер кнопки. Есть два варианта: small и medium |
| позиция | строка | Положение кнопки по отношению к соседним элементам. Опции включают: standalone, left, middle, right |
| применить тень | булево | Определяет, применять ли тень к кнопке |
| применить размытие | булево | Определяет, применять ли размытие к кнопке |
| отключено | булево | Определяет, отключена ли кнопка |
| фокус | булево | Указывает, имеет ли кнопка фокус |
Группа плавающих кнопок
- Использование
- Свойства
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
export const MyComponent = () => {
return (
<FloatingButtonGroup size="small">
<FloatingButton
className
Icon={IconClipboardText}
title
size="small"
position="standalone"
applyShadow={true}
applyBlur={true}
disabled={false}
focus={true}
/>
<FloatingButton
className
Icon={IconCheckbox}
title
size="small"
position="standalone"
applyShadow={true}
applyBlur={true}
disabled={false}
/>
</FloatingButtonGroup>
);
};
| Свойства | Тип | Описание | По умолчанию |
|---|---|---|---|
| размер | строка | Размер кнопки. Есть два варианта: small и medium | маленький |
| children | ReactNode | Массив элементов React, представляющих отдельные кнопки в группе |
Плавающая кнопка с иконкой
- Использование
- Свойства
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";
export const MyComponent = () => {
return (
<FloatingIconButton
className
Icon={IconSearch}
size="small"
position="standalone"
applyShadow={true}
applyBlur={true}
disabled={false}
focus={false}
onClick={() => console.log("click")}
isActive={true}
/>
);
};
| Свойства | Тип | Описание |
|---|---|---|
| className | строка | Необязательное имя для дополнительной стилизации |
| Иконка | React.ComponentType | Необязательный компонент иконки, отображаемый на кнопке |
| размер | строка | Размер кнопки. Есть два варианта: small и medium |
| позиция | строка | Положение кнопки по отношению к соседним элементам. Опции включают: standalone, left, right и middle |
| применить тень | булево | Определяет, применять ли тень к кнопке |
| применить размытие | булево | Определяет, применять ли размытие к кнопке |
| отключено | булево | Определяет, отключена ли кнопка |
| фокус | булево | Указывает, имеет ли кнопка фокус |
| onClick | функция | Функция обратного вызова, которая срабатывает при нажатии пользователем на кнопку |
| активен | булево | Определяет, находится ли кнопка в активном состоянии |
Группа плавающих кнопок с иконками
- Использование
- Свойства
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
export const MyComponent = () => {
const iconButtons = [
{
Icon: IconClipboardText,
onClick: () => console.log("Button 1 clicked"),
isActive: true,
},
{
Icon: IconCheckbox,
onClick: () => console.log("Button 2 clicked"),
isActive: true,
},
];
return (
<FloatingIconButtonGroup
className
size="small"
iconButtons={iconButtons} />
);
};
| Свойства | Тип | Описание |
|---|---|---|
| className | строка | Необязательное имя для дополнительной стилизации |
| размер | строка | Размер кнопки. Есть два варианта: small и medium |
| кнопки с иконками | массив | Массив объектов, каждый из которых представляет собой кнопку с иконкой в группе. Каждый объект должен включать компонент иконки, который вы хотите отобразить на кнопке, функцию, которую вы хотите вызвать при нажатии на кнопку, и информацию о том, должна ли кнопка быть активной или нет. |
Легкая кнопка
- Использование
- Свойства
import { LightButton } from "@/ui/input/button/components/LightButton";
export const MyComponent = () => {
return <LightButton
className
icon={null}
title="Title"
accent="secondary"
active={false}
disabled={false}
focus={true}
onClick={()=>console.log('click')}
/>;
};
| Свойства | Тип | Описание |
|---|---|---|
| className | строка | Необязательное имя для дополнительной стилизации |
| иконка | React.ReactNode | Иконка, которую вы хотите отобразить на кнопке |
| заголовок | строка | Текстовое содержимое кнопки |
| акцент | строка | Акцентный цвет кнопки. Опции включают: secondary и tertiary |
| активный | булево | Определяет, находится ли кнопка в активном состоянии |
| отключено | булево | Определяет, отключена ли кнопка |
| фокус | булево | Указывает, имеет ли кнопка фокус |
| onClick | функция | Функция обратного вызова, которая срабатывает при нажатии пользователем на кнопку |
Легкая кнопка с иконкой
- Использование
- Свойства
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";
export const MyComponent = () => {
return (
<LightIconButton
className
testId="test1"
Icon={IconSearch}
title="Title"
size="small"
accent="secondary"
active={true}
disabled={false}
focus={true}
onClick={() => console.log("click")}
/>
);
};
| Свойства | Тип | Описание |
|---|---|---|
| className | строка | Необязательное имя для дополнительной стилизации |
| идентификатор теста | строка | Идентификатор теста для кнопки |
| Иконка | React.ComponentType | Необязательный компонент иконки, отображаемый на кнопке |
| заголовок | строка | Текстовое содержимое кнопки |
| размер | строка | Размер кнопки. Есть два варианта: small и medium |
| акцент | строка | Акцентный цвет кнопки. Опции включают: secondary и tertiary |
| активный | булево | Определяет, находится ли кнопка в активном состоянии |
| отключено | булево | Определяет, отключена ли кнопка |
| фокус | булево | Указывает, имеет ли кнопка фокус |
| onClick | функция | Функция обратного вызова, которая срабатывает при нажатии пользователем на кнопку |
Главная кнопка
- Использование
- Свойства
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";
export const MyComponent = () => {
return (
<MainButton
title="Checkbox"
fullWidth={false}
variant="primary"
soon={false}
Icon={IconCheckbox}
/>
);
};
| Свойства | Тип | Описание |
|---|---|---|
| заголовок | строка | Текстовое содержимое кнопки |
| полнаяШирина | булево | Определяет, должна ли кнопка занимать всю ширину контейнера |
| вариант | строка | Визуальный стиль кнопки. Опции включают primary и secondary |
| скоро | булево | Указывает, отмечена ли кнопка как «скоро» (например, для предстоящих функций) |
| Иконка | React.ComponentType | Необязательный компонент иконки, отображаемый на кнопке |
React button props | React.ComponentProps<'button'> | Все стандартные свойства кнопки HTML поддерживаются |
Круглая кнопка с иконкой
- Использование
- Свойства
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";
export const MyComponent = () => {
return (
<RoundedIconButton
Icon={IconSearch}
/>
);
};
| Свойства | Тип | Описание |
|---|---|---|
| Иконка | React.ComponentType | |
React button props | React.ButtonHTMLAttributes<HTMLButtonElement> |