Button

import { Button } from '@megafon/ui-core';

Примеры и код

Свойства и методы

Цветовые темы

Зеленая

<Button>active</Button>
<Button disabled>disabled</Button>
<Button showLoader>with loader</Button>
<Button showArrow>with arrow</Button>
<Button icon={<Balance24 />}>with icon</Button>
<div>
  <Button icon={<Balance24 />} />
</div>

Зеленая Soft

<Button theme="green-soft">active</Button>
<Button theme="green-soft" disabled>
  disabled
</Button>
<Button theme="green-soft" showLoader>
  with loader
</Button>
<Button theme="green-soft" showArrow>
  with arrow
</Button>
<Button theme="green-soft" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button theme="green-soft" icon={<Balance24 />} />
</div>

Фиолетовая

<Button theme="purple">active</Button>
<Button theme="purple" disabled>
  disabled
</Button>
<Button theme="purple" showLoader>
  with loader
</Button>
<Button theme="purple" showArrow>
  with arrow
</Button>
<Button theme="purple" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button theme="purple" icon={<Balance24 />} />
</div>

Фиолетовая soft

<Button theme="purple-soft">active</Button>
<Button theme="purple-soft" disabled>
  disabled
</Button>
<Button theme="purple-soft" showLoader>
  with loader
</Button>
<Button theme="purple-soft" showArrow>
  with arrow
</Button>
<Button theme="purple-soft" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button theme="purple-soft" icon={<Balance24 />} />
</div>

Белая

<Button theme="white">active</Button>
<Button theme="white" disabled>
  disabled
</Button>
<Button theme="white" showLoader>
  with loader
</Button>
<Button theme="white" showArrow>
  with arrow
</Button>
<Button theme="white" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button theme="white" icon={<Balance24 />} />
</div>

Цветовые темы с outline

Зеленая

<Button type="outline">active</Button>
<Button type="outline" disabled>
  disabled
</Button>
<Button type="outline" showLoader>
  with loader
</Button>
<Button type="outline" showArrow>
  with arrow
</Button>
<Button type="outline" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button type="outline" icon={<Balance24 />} />
</div>

Фиолетовая

<Button type="outline" theme="purple">
  active
</Button>
<Button type="outline" theme="purple" disabled>
  disabled
</Button>
<Button type="outline" theme="purple" showLoader>
  with loader
</Button>
<Button type="outline" theme="purple" showArrow>
  with arrow
</Button>
<Button type="outline" theme="purple" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button type="outline" theme="purple" icon={<Balance24 />} />
</div>

Белая

<Button type="outline" theme="white">
  active
</Button>
<Button type="outline" theme="white" disabled>
  disabled
</Button>
<Button type="outline" theme="white" showLoader>
  with loader
</Button>
<Button type="outline" theme="white" showArrow>
  with arrow
</Button>
<Button type="outline" theme="white" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button type="outline" theme="white" icon={<Balance24 />} />
</div>

Черная

<Button type="outline" theme="black">
  active
</Button>
<Button type="outline" theme="black" disabled>
  disabled
</Button>
<Button type="outline" theme="black" showLoader>
  with loader
</Button>
<Button type="outline" theme="black" showArrow>
  with arrow
</Button>
<Button type="outline" theme="black" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button type="outline" theme="black" icon={<Balance24 />} />
</div>

Цветовые темы с типом text

Зеленая

<Button theme="green" type="text">
  active
</Button>
<Button theme="green" type="text" disabled>
  disabled
</Button>
<Button theme="green" type="text" showLoader>
  with loader
</Button>
<Button theme="green" type="text" showArrow>
  with arrow
</Button>
<Button theme="green" type="text" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button theme="green" type="text" icon={<Balance24 />} />
</div>

Фиолетовая

<Button theme="purple" type="text">
  active
</Button>
<Button theme="purple" type="text" disabled>
  disabled
</Button>
<Button theme="purple" type="text" showLoader>
  with loader
</Button>
<Button theme="purple" type="text" showArrow>
  with arrow
</Button>
<Button theme="purple" type="text" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button theme="purple" type="text" icon={<Balance24 />} />
</div>

Белая

<Button type="text" theme="white">
  active
</Button>
<Button type="text" theme="white" disabled>
  disabled
</Button>
<Button type="text" theme="white" showLoader>
  with loader
</Button>
<Button type="text" theme="white" showArrow>
  with arrow
</Button>
<Button type="text" theme="white" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button type="text" theme="white" icon={<Balance24 />} />
</div>

Черная

<Button type="text" theme="black">
  active
</Button>
<Button type="text" theme="black" disabled>
  disabled
</Button>
<Button type="text" theme="black" showLoader>
  with loader
</Button>
<Button type="text" theme="black" showArrow>
  with arrow
</Button>
<Button type="text" theme="black" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button type="text" theme="black" icon={<Balance24 />} />
</div>

Красная

<Button type="text" theme="danger">
  active
</Button>
<Button type="text" theme="danger" disabled>
  disabled
</Button>
<Button type="text" theme="danger" showLoader>
  with loader
</Button>
<Button type="text" theme="danger" showArrow>
  with arrow
</Button>
<Button type="text" theme="danger" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button type="text" theme="danger" icon={<Balance24 />} />
</div>

Размеры

Все размеры содержимого кнопки зависят от размера самой кнопки.

Просто кнопка

<Button sizeAll="extra-small">
  Extra small
</Button>
<Button sizeAll="small">
  Small
</Button>
<Button sizeAll="medium">
  Medium
</Button>
<Button sizeAll="large">
  Large
</Button>
<Button sizeWide="large" sizeDesktop="medium" sizeTablet="small" sizeMobile="extra-small">
  Adaptive
</Button>

Стрелочка

<Button sizeAll="extra-small" showArrow>
  Extra small
</Button>
<Button sizeAll="small" showArrow>
  Small
</Button>
<Button sizeAll="medium" showArrow>
  Medium
</Button>
<Button sizeAll="large" showArrow>Large</Button>

Кастомная иконка с текстом

<Button sizeAll="extra-small" icon={<Balance16 />}>
  Extra small
</Button>
<Button sizeAll="small" icon={<Balance24 />}>
  Small
</Button>
<Button sizeAll="medium" icon={<Balance24 />}>
  Medium
</Button>
<Button sizeAll="large" icon={<Balance24 />}>
  Large
</Button>

Кастомная иконка без текста

<div>
  <Button sizeAll="extra-small" icon={<Balance16 />} />
</div>
<div>
  <Button sizeAll="small" icon={<Balance24 />} />
</div>
<div>
  <Button sizeAll="medium" icon={<Balance24 />} />
</div>
<div>
  <Button sizeAll="large" icon={<Balance24 />} />
</div>

Лоадер

<Button sizeAll="extra-small" showLoader>
  Extra small
</Button>
<Button sizeAll="small" showLoader>
  Small
</Button>
<Button sizeAll="medium" showLoader>
  Medium
</Button>
<Button sizeAll="large" showLoader>
  Large
</Button>

В полную ширину

<Button fullWidth>Full Width Button</Button>

На разрешении экрана 0-767

<Button fullWidthMobile>Full Width Mobile Button</Button>

Сокращение текста при недостаточной ширине

Преобразование окончания текста в многоточие будет видно при ресайзе

<Button ellipsis>Long button text</Button>

Ссылка

<Button href="#">Link</Button>
<Button href="#" disabled>
  Disabled Link
</Button>
<Button href="#" target="_blank">
  Target Link
</Button>
<Button href="#" download>
  Download Link
</Button>

Prop name	Type	Default	Description
className	string \| string[] \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; content?: string \| undefined; inner?: string \| undefined; } \| undefined		Дополнительные классы для внутренних элементов
dataAttrs	{ root?: Record<string, string> \| undefined; content?: Record<string, string> \| undefined; inner?: Record<string, string> \| undefined; loader?: Record<string, string> \| undefined; text?: Record<...> \| undefined; arrow?: Record<...> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
theme	ButtonThemesType \| undefined	green	Тема компонента
type	ButtonTypesType \| undefined	primary	Тип компонента
href	string \| undefined		Ссылка
download	boolean \| undefined		Задает атрибут download для тега <a>
target	"_self" \| "_blank" \| "_parent" \| "_top" \| undefined		Target - свойство тега <a>
rel	string \| undefined		Rel - атрибут тега <a>
actionType	"submit" \| "reset" \| "button" \| undefined	button	Поведение кнопки
sizeAll	ButtonSizesType \| undefined	medium	Размер на всех разрешениях экрана
sizeWide	ButtonSizesType \| undefined		Размер на разрешении экрана 1280+
sizeDesktop	ButtonSizesType \| undefined		Размер на разрешении экрана 1024+
sizeTablet	ButtonSizesType \| undefined		Размер на разрешении экрана 768-1023
sizeMobile	ButtonSizesType \| undefined		Размер на разрешении экрана 0-767
fullWidth	boolean \| undefined	false	Растянуть на полную ширину контейнера
fullWidthMobile	boolean \| undefined	false	Растянуть на полную ширину контейнера на разрешении экрана 0-767
showLoader	boolean \| undefined	false	Показать загрузку
showArrow	boolean \| undefined	false	Показать стелку
icon	Element \| undefined		Иконка
disabled	boolean \| undefined		Отключение кнопки
buttonRef	Ref<HTMLButtonElement \| HTMLAnchorElement> \| undefined		Ссылка на элемент
ellipsis	boolean \| undefined	false	Обрезать текст при недостаточной ширине и добавлять многоточие
onClick	((e: SyntheticEvent<EventTarget, Event>) => void) \| undefined		Обработчик клика по кнопке

Компонент наследует атрибуты HTML-элементов `<button>` и `<a>`

type ButtonLinkCommonAttributes = Pick<
    React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement>,
    keyof (React.ButtonHTMLAttributes<HTMLButtonElement> | React.AnchorHTMLAttributes<HTMLAnchorElement>)
>;

interface IButtonProps extends Omit<ButtonLinkCommonAttributes, 'className' | 'type'>