ButtonsBox

import { ButtonsBox } from '@megafon/ui-shared';

Примеры и код

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

Базовое использование

Кнопки имеют одинаковую ширину.

<ButtonsBox
  button={{
      title: 'Текст кнопки 1',
  }}
  extraButton={{
      type: 'outline',
      title: 'Текст кнопки 2 длиннее',
  }}
/>

Варианты кнопок

Тип primary

<ButtonsBox
  button={{
      type: 'primary',
      title: 'Текст кнопки',
  }}
/>
<ButtonsBox
  button={{
      type: 'primary',
      title: 'Текст кнопки',
      icon: <BalanceIcon />,
  }}
/>
<ButtonsBox
  button={{
      type: 'primary',
      icon: <BalanceIcon />,
  }}
/>
<ButtonsBox
  button={{
      type: 'primary',
      title: 'Текст кнопки',
      showArrow: true,
  }}
/>

Тип outline

<ButtonsBox
  button={{
      type: 'outline',
      title: 'Текст кнопки',
  }}
/>
<ButtonsBox
  button={{
      type: 'outline',
      title: 'Текст кнопки',
      icon: <BalanceIcon />,
  }}
/>
<ButtonsBox
  button={{
      type: 'outline',
      icon: <BalanceIcon />,
  }}
/>
<ButtonsBox
  button={{
      type: 'outline',
      title: 'Текст кнопки',
      showArrow: true,
  }}
/>

Выравнивание

Горизонтальное выравнивание по левому краю (по умолчанию)

<ButtonsBox
  button={{
      type: 'primary',
      title: 'Текст кнопки',
  }}
/>

<ButtonsBox
  button={{
      type: 'primary',
      title: 'Текст кнопки 1',
  }}
  extraButton={{
      type: 'outline',
      title: 'Текст кнопки 2 длиннее',
  }}
/>

Горизонтальное выравнивание по центру

<ButtonsBox
  align='center'
  button={{
      type: 'outline',
      title: 'Текст кнопки',
  }}
/>

<ButtonsBox
  align='center'
  button={{
      type: 'primary',
      title: 'Текс кнопки 1',
  }}
  extraButton={{
      type: 'outline',
      title: 'Текст кнопки 2 длиннее',
  }}
/>

Варианты действий

<ButtonsBox
  button={{
      type: 'primary',
      title: 'Link',
      href: '#',
      target: '_self',
  }}
/>
<ButtonsBox
  button={{
      type: 'outline',
      title: 'onClick',
      onClick: () => undefined,
  }}
/>
<ButtonsBox
  button={{
      type: 'outline',
      title: 'Download',
      href: 'file.pdf',
      download: true,
  }}
/>

Prop name	Type	Default	Description
dataAttrs	{ root?: Record<string, string>; button?: Record<string, string>; extraButton?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам
className	string		Дополнительный класс корневого элемента
classes	{ root?: string; button?: string; extraButton?: string; }	{}	Дополнительные классы для внутренних элементов
button*	ButtonType		Кнопка
extraButton	ButtonType		Дополнительная кнопка
align	"center" \| "left"		Горизонтальное выравнивание
rootRef	Ref<HTMLDivElement>		Ссылка на корневой элемент

type ButtonType = {
    /** Тип */
    type?: 'primary' | 'outline';
    /** Иконка */
    icon?: React.JSX.Element;
    /** Название */
    title?: string;
    /** Ссылка */
    href?: string;
    /** Target свойство кнопки */
    target?: '_self' | '_blank' | '_parent' | '_top';
    /** Rel - атрибут тега <a> */
    rel?: string;
    /** Задает атрибут download для тега <a> */
    download?: boolean;
    /** Показать стелку */
    showArrow?: boolean;
    /** Обработчик клика */
    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
};