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,
  }}
/>