Figma

ButtonBanner

import { ButtonBanner } from '@megafon/ui-shared';
Примеры и код
Свойства и методы

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

<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
/>

Ссылка в кнопке

<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  buttonUrl="#"
  buttonTarget="_blank"
/>

Цвета кнопки

<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  buttonColor="green"
/>
<br />
<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  buttonColor="purple"
/>

Тип кнопки

<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  buttonColor="green"
  buttonType="primary"
/>
<br />
<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  buttonColor="green"
  buttonType="outline"
/>

Изображение

  • При наличии изображения кнопка автоматически располагается под текстом
  • Изображение автоматически центрируется и масштабируется по наименьшей высоте или ширине своего контейнера
  • Высота контейнера изображения зависит от высоты баннера (на мобильных разрешениях высота контейнера фиксированная)
  • Части изображения, вышедшие за пределы контейнера, обрезаются

По умолчанию

<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  imageUrl={image.src}
  buttonText="Выбрать тариф"
/>

Масштабирование

<ButtonBanner
  title='Тип масштабирования изображения - "cover"'
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  imageScaling="cover"
  imageUrl={image.src}
/>
<br />
<ButtonBanner
  title='Тип масштабирования изображения - "contain"'
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  imageScaling="contain"
  imageUrl={image.src}
/>

HTML-теги и спецсимволы

В свойствах title и text поддерживаются некоторые HTML-теги:
- для title: "<br>, <font color>, <a href>";
- для text: "<br>, <font color>, <a href>, <b>".


Также в обоих свойствах поддерживается спецсимвол &nbsp.
Демо данные
const htmlTitle = 'Скачивайте&nbspмобильное приложение <font color="#731982">МегаФон</font><br>по <a href="https://moscow.megafon.ru">ссылке</a>';
const htmlText = '<b>Текстовое</b> <font color="#731982">описание</font> не<br>должно <a href="https://moscow.megafon.ru">превышать</a> 150&nbspсимволов.';
<ButtonBanner
  title={htmlTitle}
  text={htmlText}
  buttonText="Выбрать тариф"
/>
Prop nameTypeDefaultDescription
dataAttrs{ root?: Record<string, string>; button?: Record<string, string>; }Дополнительные data атрибуты к внутренним элементам
classNamestringДополнительный css класс для корневого элемента
classes{ root?: string; button?: string; }{}Дополнительный css классы для корневого и внутренних элементов
rootRefRef<HTMLDivElement>Ссылка на корневой элемент
title*stringЗаголовок
text*ReactNode | ReactNode[]Текст
imageUrlstringURL изображения
buttonText*stringТекст кнопки
buttonUrlstringURL кнопки
buttonDownloadbooleanDownload - свойство тега <a>
buttonTargetButtonTargetType_selfTarget - свойство тега <a>
buttonColorButtonColorTypegreenЦвет кнопки
buttonTypeButtonTypesTypeprimaryТип кнопки
buttonRelstringRel - атрибут тега <a>
imageScalingImageScalingTypecoverМасштабирование изображения
onButtonClick(e: SyntheticEvent<EventTarget, Event>) => voidОбработчик клика по кнопке