button
Используется для создания различных типов кнопок.
Обзор блока
Модификаторы блока
| Модификатор |
Допустимые значения |
Способы использования |
Описание |
| type |
'link', 'submit' |
BEMJSON |
Тип кнопки. |
| togglable |
'check', 'radio' |
BEMJSON |
Тип переключателя. |
| disabled |
true |
BEMJSON, JS |
Неактивное состояние. |
| focused |
true |
BEMJSON, JS |
Фокус на блоке. |
| pressed |
true |
– |
Действие «нажатие на кнопку». |
| hovered |
true |
– |
Наведение курсором. |
| theme |
'islands' |
BEMJSON |
Стилевое оформление. |
| size |
's', 'm', 'l', 'xl' |
BEMJSON |
Размер кнопки. Используется для кнопок с модификатором theme в значении islands. |
| view |
'action', 'pseudo', 'plain' |
BEMJSON |
Тип визуального выделения кнопки. |
Специализированные поля блока
Описание блока
Блок button предоставляет возможность изменять размер, состояние, содержимое и внешний вид кнопок.
Модификаторы блока
Модификатор type
Допустимые значения: 'link', 'submit'.
Способ использования: BEMJSON.
Кнопка-ссылка (модификатор type в значении link)
Используется для создания кнопки, обеспечивающей переход по адресу, указанному в поле url.
Open in a new window<a class="button button_theme_islands button_size_m button_type_link button__control i-bem" data-bem='{"button":{}}' role="link" href="https://bem.info/"><span class="button__text">Попробуй БЭМ</span></a>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
},
url: 'https://bem.info/',
text: 'Попробуй БЭМ'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
}
}
]
Кнопка отправки формы (модификатор type в значении submit)
Используется для создания кнопки, обеспечивающей отправку данных на сервер. Кнопка такого типа всегда должна располагаться в форме.
Open in a new window<button class="button button_theme_islands button_size_m button_type_submit button__control i-bem" data-bem='{"button":{}}' role="button" type="submit"><span class="button__text">Я отправляю данные</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
text: 'Я отправляю данные'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
Модификатор togglable
Допустимые значения: 'check', 'radio'.
Способ использования: BEMJSON.
Используется для реализации «залипания» кнопки. Определяет поведение нажатой кнопки.
Кнопка-переключатель (модификатор togglable в значении check)
Первое нажатие на кнопку вдавливает ее, второе – приводит в первоначальное состояние.
Open in a new window<button class="button button_theme_islands button_size_m button_togglable_check button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Я нажата</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'check'
},
text: 'Я нажата'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'check'
}
}
]
Радиокнопка (модификатор togglable в значении radio)
Нажатие на кнопку вдавливает ее, и она может быть приведена в первоначальное состояние только программно. Используется в составе радиогруппы.
Open in a new window<button class="button button_theme_islands button_size_m button_togglable_radio button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Я «залипла» :)</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'radio'
},
text: 'Я «залипла» :)'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'radio'
}
}
]
Пример использования в радиогруппе:
Open in a new window<span class="radio-group radio-group_theme_islands radio-group_size_m radio-group_type_button radio-group_togglable_radio control-group i-bem" data-bem='{"radio-group":{}}' role="radiogroup"><label class="radio radio_type_button radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Первый</span></button>
<input
class="radio__control" type="radio" autocomplete="off" name="radio-button" value="1"></label><label class="radio radio_type_button radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Второй</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="2"></label>
<label
class="radio radio_type_button radio_theme_islands radio_size_m i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">Третий</span></button><input class="radio__control"
type="radio" autocomplete="off" name="radio-button" value="3"></label>
</span>
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
togglable: 'radio'
},
name: 'radio-button',
options: [
{
val: 1,
text: 'Первый'
},
{
val: 2,
text: 'Второй',
checked: true
},
{
val: 3,
text: 'Третий'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
togglable: 'radio'
}
}
]
Модификатор disabled
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Open in a new window<button class="button button_theme_islands button_size_m button_disabled button__control i-bem" data-bem='{"button":{}}' role="button" type="button" disabled="disabled"><span class="button__text">Неактивна</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
text: 'Неактивна'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
Модификатор focused
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Отвечает за наличие фокуса на блоке.
Выставляется автоматически при получении кнопки фокуса.
{
block : 'button',
mods : { theme : 'islands', size : 'm', focused : true },
text : 'В фокусе'
}
Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.
Модификатор pressed
Допустимое значение: true.
Способ использования: – .
Определяет действие «нажатие на кнопку».
Выставляется автоматически при нажатии на кнопку.
Модификатор hovered
Допустимое значение: true.
Способы использования: – .
Выставляется блоку автоматически, когда курсор мыши находится в пределах контрола, но щелчка по нему не происходит.
Модификатор theme
Допустимое значение: 'islands'.
Способ использования: BEMJSON.
Отвечает за стилевое оформление блока.
Необходимо использовать с модификатором size.
Open in a new window<button class="button button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Тема islands</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'Тема islands'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Модификатор size
Допустимые значения для темы islands: 's', 'm', 'l', 'xl'.
Способ использования: BEMJSON.
Задает размер всем типам кнопок.
Необходимо использовать с модификатором theme в значении islands.
s
Open in a new window<button class="button button_theme_islands button_size_s button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Размер s</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 's'
},
text: 'Размер s'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 's'
}
}
]
m
Open in a new window<button class="button button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Размер m</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'Размер m'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
}
}
]
l
Open in a new window<button class="button button_theme_islands button_size_l button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Размер l</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'l'
},
text: 'Размер l'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'l'
}
}
]
xl
Open in a new window<button class="button button_theme_islands button_size_xl button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Размер xl</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'xl'
},
text: 'Размер xl'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
Модификатор view
Допустимые значения: 'action', 'pseudo', 'plain'.
Способ использования: BEMJSON.
Кнопка действия (модификатор view в значении action)
Используется для визуального выделения кнопки на странице.
Open in a new window<button class="button button_theme_islands button_size_m button_view_action button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Купить сейчас!</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'action'
},
text: 'Купить сейчас!'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'action'
}
}
]
Псевдокнопка (модификатор view в значении pseudo)
Используется для изменения внешнего вида блока при необходимости сделать кнопку менее заметной на странице.
Open in a new window<button class="button button_theme_islands button_size_m button_view_pseudo button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">У меня прозрачный фон</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'pseudo'
},
text: 'У меня прозрачный фон'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'pseudo'
}
}
]
Open in a new window<button class="button button_theme_islands button_size_m button_view_pseudo button_disabled button__control i-bem" data-bem='{"button":{}}' role="button" type="button" disabled="disabled"><span class="button__text">У меня нет границ</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'pseudo',
disabled: true
},
text: 'У меня нет границ'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'pseudo',
disabled: true
}
}
]
Кнопка без границ (модификатор view в значении plain)
Используется при необходимости представить кнопкой другой блок, например, иконку (icon).
Open in a new window<button class="button button_theme_islands button_size_m button_view_plain button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Кнопка без границ</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'plain'
},
text: 'Кнопка без границ'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'plain'
}
}
]
Open in a new window<button class="button button_theme_islands button_size_m button_view_plain button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="icon icon_social_twitter"></span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'plain'
},
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'plain'
}
}
]
Специализированные поля блока
Поле name
Тип: String.
Определяет уникальное имя блока.
Не используется, если модификатор type выставлен в значение link.
Open in a new window<button class="button button_theme_islands button_size_m button_type_submit button__control i-bem" data-bem='{"button":{}}' role="button" type="submit" name="Test_1" value="passed"><span class="button__text">Проверить результат</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test_1',
val: 'passed',
text: 'Проверить результат'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
Поле val
Тип данных: String, Number.
Определяет значение кнопки, которое будет отправлено на сервер.
Не используется, если модификатор type выставлен в значение link.
Open in a new window<button class="button button_theme_islands button_size_m button_type_submit button__control i-bem" data-bem='{"button":{}}' role="button" type="submit" name="Test_1" value="passed"><span class="button__text">Проверить результат</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test_1',
val: 'passed',
text: 'Проверить результат'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
Поле text
Тип: String.
Определяет текст, который отображается на кнопке.
Open in a new window<button class="button button_theme_islands button_size_m button_type_submit button__control i-bem" data-bem='{"button":{}}' role="button" type="submit" name="Test_1" value="passed"><span class="button__text">Проверить результат</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test_1',
val: 'passed',
text: 'Проверить результат'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
Примечание Поле text позволяет определить текст кнопки и подходит для решения большинства задач, однако через него нельзя задать произвольный BEMJSON. В случае если необходимо внутри блока button определить некую HTML-разметку, нужно использовать поле content.
Поле url
Тип: String.
Определяет адрес, по которому осуществляется переход при нажатии на кнопку с модификатором type в значении link.
Не используется с другими типами кнопок.
Open in a new window<a class="button button_theme_islands button_size_m button_type_link button__control i-bem" data-bem='{"button":{}}' role="link" href="https://bem.info/"><span class="button__text">Попробуй БЭМ</span></a>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
},
url: 'https://bem.info/',
text: 'Попробуй БЭМ'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
}
}
]
Поле icon
Тип: BEMJSON.
Определяет иконку, которая отображается на кнопке. Иконка задается с помощью блока icon.
Open in a new window<button class="button button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="icon icon_social_twitter"></span><span class="button__text">Twitter</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'Twitter',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
}
}
]
Поле title
Тип: String.
Определяет содержание всплывающей подсказки. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.
Open in a new window<button class="button button_theme_islands button_size_m button_type_submit button__control i-bem" data-bem='{"button":{}}' role="button" title="Кнопка отправки результатов теста" type="submit" name="Тест №1" value="Пройден успешно"><span class="button__text">Проверить результат</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Тест №1',
val: 'Пройден успешно',
text: 'Проверить результат',
title: 'Кнопка отправки результатов теста'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
Поле id
Тип: String.
Определяет уникальный идентификатор кнопки.
Open in a new window<button class="button button_theme_islands button_size_m button_type_submit button__control i-bem" data-bem='{"button":{}}' role="button" id="Unique_1" type="submit" name="Тест №1" value="Пройден успешно"><span class="button__text">Проверить результат</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Тест №1',
val: 'Пройден успешно',
text: 'Проверить результат',
id: 'Unique_1'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
Поле tabIndex
Тип: Number.
Определяет порядок получения фокуса при переходе между контролами с помощью клавиши Tab.
Open in a new window<button class="button button_theme_islands button_size_m button_type_submit button__control i-bem" data-bem='{"button":{}}' role="button" tabindex="2" id="val_1" type="submit" name="Тест №1" value="Пройден успешно"><span class="button__text">Проверить результат</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Тест №1',
val: 'Пройден успешно',
text: 'Проверить результат',
id: 'val_1',
tabIndex: 2
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]