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