Buttons

 

Основная кнопка

Для главных действий в пользовательских сценариях. Такая кнопка всегда одна на странице или во всплывающем/модальном окне. Если кнопок на странице две и более, одна из них обязательно будет основной, а остальные – контурные. Это означает, что одно дейстие при проектировании сценария задумывалось как самое приоритетное.

Все десктопные версии кнопок могут иметь внутри себя иконку около подписи. Кнопками с иконками лучше не злоупотреблять: это дополнительный способ выделить одно ключевое действие или добавить интерфейсу немного эмоциональности. Иконка должна быть четко согласована с подписью по смыслу, не вызывая двусмысленных ассоциаций.

В большинстве интерфейсов используется темная кнопка на белом фоне. У темной кнопки может быть только один цвет заливки#1F2229#1F2229. 

Для некоторых случаев может использоваться инвертированная кнопка: то есть, с белой заливкойFFFFFF#FFFFFF и темным текстом1F2229#1F2229. Инвертированная кнопка применяется только для страниц со сплошной темной фоновой заливкой. Темный фон у страницы подчеркивает либо статусность продукта (например, тариф «Премиум»), либо его технологичность (интерфейс виртуального помощника Мии). Если несколько кнопок расположены рядом на странице с темным фоном, то одна из них будет со сплошной белой заливкой, остальные – с белым контуром.

Отступы от подписи до краев кнопки в десктопе по 45 px, в мобильной версии – по 35 px. Соответственно, ширина кнопки складывается из длины подписи и отступов по краям и может меняться. Высота кнопки всегда одинакова, для десктопа она составляет 60 px, для мобильной версии – 48 px.

Цветные кнопки не допускаются. Однако, кнопка может размещаться на цветном однородном фоне из палитры Tele2. Размещать кнопки на фоне с паттерном или поверх фотографий не допускается.

Иногда нажатие кнопки подразумевает, что пользователь помимо основного действия дает согласие на обработку персональных данных или принимает какие-либо требования или правила. В таких случаях мы используем следующую конструкцию: кнопка + мелкий текст, в который «зашита» ссылка на юридический документ. Мы не используем чекбокс для таких случаев.



В мобильной версии большая кнопка меняет свой размер на btn--middle автоматически. 

Обычный вариант

Неактивная кнопка не используется Почему?

Кнопка может содержать иконку

Маленькая кнопка

<a class="btn btn-primary">Основная кнопка</a>
<a class="btn btn-primary btn--medium">Основная кнопка средняя</a>
<a class="btn btn-primary btn--small">Основная кнопка маленькая</a>
<a class="btn btn-primary"><i class="ico icon-search"></i> поиск</a>
ПоказатьСвернуть код

Когда используется маленькая кнопка

Для однородных и важных «продающих» действий, например, кнопка «Купить» под фотографиями товаров в интернет-магазине. Можно использовать для прилипающих плашек, если важно сохранить их компактный размер и стандартная кнопка будет слишком велика.

Размер единый для мобильного и десктопного интерфейсов. Отступы от подписи до краев кнопки по 20 px. Ширина кнопки складывается из длины подписи и отступов по краям и может меняться. Высота кнопки всегда одинакова, она составляет 40 px.

Контурная кнопка 

Когда используется большая кнопка

Для второстепенных действий в пользовательских сценариях. Таких кнопок может быть одна или две на странице или в поп-апе рядом с основной кнопкой. Большая контурная кнопка используется для действий типа «Отключить» на страницах тарифов и услуг.

Также используется для кнопки «Закрыть» во всплывающих окнах, даже если это действие единственное.

У контурных кнопок цвет контура также может быть только 2229#1F2229 или 2229#FFF в зависимости от цвета фона страницы. Кнопки с цветным контуром недопустимы. Кнопка может размещаться на цветном однородном фоне из палитры Tele2. Размещать кнопки на фоне с паттерном или поверх фотографий не допускается.

Отступы от подписи до краев кнопки в десктопе по 45 px, в мобильной версии – по 35 px. Соответственно, ширина кнопки складывается из длины подписи и отступов по краям и может меняться. Высота кнопки всегда одинакова, для десктопа она составляет 60 px, для мобильной версии – 48 px.

Контурная кнопка

Когда используется маленькая кнопка

Для однородных действий, стоящих в одном горизонтальном или вертикальном ряду. Размер единый для мобильного и десктопного интерфейсов. Не имеет неактивного состояния.

Размер единый для мобильного и десктопного интерфейсов. Отступы от подписи до краев кнопки по 20 px. Ширина кнопки складывается из длины подписи и отступов по краям и может меняться. Высота кнопки всегда одинакова, она составляет 40 px.

Контурная кнопка
<a class="btn">Контурная кнопка</a>
<a class="btn btn--small">Контурная кнопка маленькая</a>
ПоказатьСвернуть код