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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
},
url: 'https://bem.info/',
text: 'Попробуй БЭМ'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
}
}
]
deps
Кнопка отправки формы (модификатор 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
text: 'Я отправляю данные'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
deps
Модификатор 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'check'
},
text: 'Я нажата'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'check'
}
}
]
deps
Радиокнопка (модификатор 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'radio'
},
text: 'Я «залипла» :)'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'radio'
}
}
]
deps
Пример использования в радиогруппе:
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>
HTML{
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: 'Третий'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
togglable: 'radio'
}
}
]
deps
Модификатор 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
text: 'Неактивна'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
deps
Модификатор 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'Тема islands'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Модификатор 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 's'
},
text: 'Размер s'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 's'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'Размер m'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'l'
},
text: 'Размер l'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'l'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'xl'
},
text: 'Размер xl'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
deps
Модификатор 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'action'
},
text: 'Купить сейчас!'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'action'
}
}
]
deps
Псевдокнопка (модификатор 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'pseudo'
},
text: 'У меня прозрачный фон'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'pseudo'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'pseudo',
disabled: true
},
text: 'У меня нет границ'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'pseudo',
disabled: true
}
}
]
deps
Кнопка без границ (модификатор 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'plain'
},
text: 'Кнопка без границ'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'plain'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'plain'
},
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'plain'
}
}
]
deps
Специализированные поля блока
Поле 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test_1',
val: 'passed',
text: 'Проверить результат'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
deps
Поле 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test_1',
val: 'passed',
text: 'Проверить результат'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
deps
Поле 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test_1',
val: 'passed',
text: 'Проверить результат'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
deps
Примечание Поле 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
},
url: 'https://bem.info/',
text: 'Попробуй БЭМ'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
}
}
]
deps
Поле 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'Twitter',
icon: {
block: 'icon',
mods: {
social: 'twitter'
}
}
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
Поле 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Тест №1',
val: 'Пройден успешно',
text: 'Проверить результат',
title: 'Кнопка отправки результатов теста'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
deps
Поле 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Тест №1',
val: 'Пройден успешно',
text: 'Проверить результат',
id: 'Unique_1'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
deps
Поле 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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Тест №1',
val: 'Пройден успешно',
text: 'Проверить результат',
id: 'val_1',
tabIndex: 2
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
deps