Figma

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>