ButtonLinkBox

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

Примеры и код

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

Контент

Кнопка со ссылкой

<ButtonLinkBox
  buttonTitle="Кнопка"
  buttonUrl="#"
  linkTitle="Ссылка"
  linkUrl="#"
  className="custom-class"
/>

Только кнопка

<ButtonLinkBox
  buttonTitle="Кнопка"
  buttonUrl="#"
/>

Только ссылка

<ButtonLinkBox
  linkTitle="Ссылка"
  linkUrl="#"
/>

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

<ButtonLinkBox
  buttonTitle="Кнопка"
  buttonUrl="#"
  linkTitle="Ссылка"
  linkUrl="#"
  align="center"
/>

Цвет кнопки c типом primary


  <ButtonLinkBox
      buttonColor='green'
      buttonType='primary'
      buttonTitle="Кнопка"
      buttonUrl="#"
  />
  <ButtonLinkBox
      buttonColor='purple'
      buttonType='primary'
      buttonTitle="Кнопка"
      buttonUrl="#"
  />
  <ButtonLinkBox
      buttonColor='green-soft'
      buttonType='primary'
      buttonTitle="Кнопка"
      buttonUrl="#"
  />
  <ButtonLinkBox
      buttonColor='purple-soft'
      buttonType='primary'
      buttonTitle="Кнопка"
      buttonUrl="#"
  />

Цвет кнопки с типом outline


  <ButtonLinkBox
      buttonColor='green'
      buttonType='outline'
      buttonTitle="Кнопка"
      buttonUrl="#"
  />
  <ButtonLinkBox
      buttonColor='purple'
      buttonType='outline'
      buttonTitle="Кнопка"
      buttonUrl="#"
  />
  <ButtonLinkBox
      buttonColor='black'
      buttonType='outline'
      buttonTitle="Кнопка"
      buttonUrl="#"
  />

Правила использования зеленого фона

запрещено использовать ссылку
кнопка должна быть фиолетовой

<ButtonLinkBox
  buttonTitle="Кнопка"
  buttonUrl="#"
  buttonColor="purple"
  align="center"
/>

Prop name	Type	Default	Description
dataAttrs	{ root?: Record<string, string>; link?: Record<string, string>; button?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам
className	string		Дополнительный класс корневого элемента
classes	{ root?: string; button?: string; link?: string; }	{}	Дополнительные классы для корневого и внутренних элементов
rootRef	Ref<HTMLDivElement>		Ссылка на корневой элемент
buttonTitle	string		Заголовок кнопки
buttonUrl	string		Ссылка кнопки
buttonDownload	boolean		Добавляет атрибут download для тега <a> компонента Button
buttonColor	"green" \| "purple" \| "green-soft" \| "purple-soft" \| "black"	green	Цвет кнопки
buttonType	"primary" \| "outline"	primary	Тип кнопки
buttonTarget	"_self" \| "_blank" \| "_parent" \| "_top"		Target свойство кнопки
buttonRel	string		Rel - атрибут тега <a> для кнопки
linkTitle	string		Заголовок ссылки
linkUrl	string		Добавляет атрибут download для тега <a> компонента Button
linkTarget	"_self" \| "_blank" \| "_parent" \| "_top"		Target свойство ссылки
linkRel	string		Rel - атрибут тега <a> для ссылки
linkDownload	boolean		Добавляет атрибут download к свойству тега <a>
align	"center" \| "left"		Горизонтальное выравнивание
onButtonClick	(e: SyntheticEvent<EventTarget, Event>) => void		Обработчик клика по кнопке
onLinkClick	(e: SyntheticEvent<EventTarget, Event>) => void		Обработчик клика по ссылке