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