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>

Серая

Показать код
<Button theme="gray">active</Button>
<Button theme="gray" disabled>
  disabled
</Button>
<Button theme="gray" showLoader>
  with loader
</Button>
<Button theme="gray" showArrow>
  with arrow
</Button>
<Button theme="gray" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button theme="gray" icon={<Balance24 />} />
</div>

Базовая (base)

Показать код
<Button theme="base">active</Button>
<Button theme="base" disabled>
  disabled
</Button>
<Button theme="base" showLoader>
  with loader
</Button>
<Button theme="base" showArrow>
  with arrow
</Button>
<Button theme="base" icon={<Balance24 />}>
  with icon
</Button>
<div>
  <Button theme="base" 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>

Дополнительный текст

  • Может быть только в размере кнопки Large
  • Не присутствует у текстовых кнопок
  • Не присутствует у кнопок, в которых есть стрелка, иконка, нет текста
Показать код
<Button sizeAll="large" subtext="30 дней бесплатно">
  Подключить
</Button>

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

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

Показать код
<Button ellipsis>Long button text</Button>
<Button sizeAll="large" ellipsis subtext="Long button subtext">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 nameTypeDefaultDescription
classNamestring | 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; subtext?: Record<...> | undefined; arrow?: Record<...> | undefined; } | undefinedДополнительные data атрибуты к внутренним элементам
themeButtonThemesType | undefinedgreenТема компонента
typeButtonTypesType | undefinedprimaryТип компонента
hrefstring | undefinedСсылка
downloadboolean | undefinedЗадает атрибут download для тега <a>
target"_self" | "_blank" | "_parent" | "_top" | undefinedTarget - свойство тега <a>
relstring | undefinedRel - атрибут тега <a>
actionType"submit" | "reset" | "button" | undefinedbuttonПоведение кнопки
sizeAllButtonSizesType | undefinedmediumРазмер на всех разрешениях экрана
sizeWideButtonSizesType | undefinedРазмер на разрешении экрана 1280+
sizeDesktopButtonSizesType | undefinedРазмер на разрешении экрана 1024+
sizeTabletButtonSizesType | undefinedРазмер на разрешении экрана 768-1023
sizeMobileButtonSizesType | undefinedРазмер на разрешении экрана 0-767
fullWidthboolean | undefinedfalseРастянуть на полную ширину контейнера
fullWidthMobileboolean | undefinedfalseРастянуть на полную ширину контейнера на разрешении экрана 0-767
showLoaderboolean | undefinedfalseПоказать загрузку
showArrowboolean | undefinedfalseПоказать стелку
iconElement | undefinedИконка
disabledboolean | undefinedОтключение кнопки
buttonRefRef<HTMLButtonElement | HTMLAnchorElement> | undefinedСсылка на элемент
ellipsisboolean | undefinedfalseОбрезать текст при недостаточной ширине и добавлять многоточие
subtextstring | undefinedДополнительный текст
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'>

ButtonClose

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

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

Белая

Показать код

  <ButtonClose />
  <ButtonClose size="medium" />

Серая

Показать код

  <ButtonClose theme="gray" />
  <ButtonClose size="medium" theme="gray" />

Светлая

Показать код

  <ButtonClose theme="soft" />
  <ButtonClose size="medium" theme="soft" />

Цветная

Показать код

  <ButtonClose theme="color" />
  <ButtonClose size="medium" theme="color" />

Тёмная

Показать код

  <ButtonClose theme="black" />
  <ButtonClose size="medium" theme="black" />
Prop nameTypeDefaultDescription
classNamestring | string[] | undefinedДополнительный класс корневого элемента
dataAttrsRecord<string, string> | undefinedДополнительные data атрибуты к внутренним элементам
themeButtonCloseThemesType | undefinedwhiteТема компонента
sizeButtonCloseSizesType | undefinedsmallРазмер компонента
disabledboolean | undefinedОтключение кнопки
buttonRefRef<HTMLButtonElement> | undefinedСсылка на элемент
onClick((e: SyntheticEvent<EventTarget, Event>) => void) | undefinedОбработчик клика по кнопке
Компонент наследует атрибуты HTML-элементов `<button>``


type ButtonCloseAttributes = Pick<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    keyof React.ButtonHTMLAttributes<HTMLButtonElement>
>;


interface IButtonCloseProps extends Omit<ButtonCloseAttributes, 'className'>