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="Выбрать тариф"
/>