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`	Тип визуального выделения кнопки.

Специализированные поля блока

Поле	Тип	Описание
name	`String`	Уникальное имя блока. Не используется, если модификатор type выставлен в значение link.
val	`String`, `Number`	Значение, отправляемое на сервер. Не используется, если модификатор type выставлен в значение link.
text	`String`	Текст кнопки.
url	`String`	Адрес. Используется только для кнопки с модификатором type в значении link.
icon	`BEMJSON`	Иконка на кнопке. Формируется блоком icon.
title	`String`	Текст всплывающей подсказки.
id	`String`	Уникальный идентификатор кнопки.
tabIndex	`Number`	Последовательность перехода между контролами при нажатии на `Tab`.

Описание блока

Блок button предоставляет возможность изменять размер, состояние, содержимое и внешний вид кнопок.

Модификаторы блока

Модификатор `type`

Допустимые значения: 'link', 'submit'.

Способ использования: BEMJSON.

Кнопка-ссылка (модификатор `type` в значении `link`)

Используется для создания кнопки, обеспечивающей переход по адресу, указанному в поле url.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'link' },
    url : 'https://bem.info/',
    text : 'Попробуй БЭМ'
}

Кнопка отправки формы (модификатор `type` в значении `submit`)

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

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    text : 'Я отправляю данные'
}

Модификатор `togglable`

Допустимые значения: 'check', 'radio'.

Способ использования: BEMJSON.

Используется для реализации «залипания» кнопки. Определяет поведение нажатой кнопки.

Кнопка-переключатель (модификатор `togglable` в значении `check`)

Первое нажатие на кнопку вдавливает ее, второе – приводит в первоначальное состояние.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', togglable : 'check' },
    text : 'Я нажата'
}

Радиокнопка (модификатор `togglable` в значении `radio`)

Нажатие на кнопку вдавливает ее, и она может быть приведена в первоначальное состояние только программно. Используется в составе радиогруппы.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', togglable : 'radio' },
    text : 'Я «залипла» :)'
}

Пример использования в радиогруппе:

{
    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 : 'Третий' }
    ]
}

Модификатор `disabled`

Допустимое значение: true.

Способы использования: BEMJSON, JS.

Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', disabled : true },
    text : 'Неактивна'
}

Модификатор `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.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm' },
    text : 'Тема islands'
}

Модификатор `size`

Допустимые значения для темы islands: 's', 'm', 'l', 'xl'.

Способ использования: BEMJSON.

Задает размер всем типам кнопок.

Необходимо использовать с модификатором theme в значении islands.

s

{
    block : 'button',
    mods : { theme : 'islands', size : 's' },
    text : 'Размер s'
}

m

{
    block : 'button',
    mods : { theme : 'islands', size : 'm' },
    text : 'Размер m'
}

l

{
    block : 'button',
    mods : { theme : 'islands', size : 'l' },
    text : 'Размер l'
}

xl

{
    block : 'button',
    mods : { theme : 'islands', size : 'xl' },
    text : 'Размер xl'
}

Модификатор `view`

Допустимые значения: 'action', 'pseudo', 'plain'.

Способ использования: BEMJSON.

Кнопка действия (модификатор `view` в значении `action`)

Используется для визуального выделения кнопки на странице.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', view : 'action' },
    text : 'Купить сейчас!'
}

Псевдокнопка (модификатор `view` в значении `pseudo`)

Используется для изменения внешнего вида блока при необходимости сделать кнопку менее заметной на странице.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', view : 'pseudo' },
    text : 'У меня прозрачный фон'
}

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', view : 'pseudo', disabled : true },
    text : 'У меня нет границ'
}

Кнопка без границ (модификатор `view` в значении `plain`)

Используется при необходимости представить кнопкой другой блок, например, иконку (icon).

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', view : 'plain' },
    text : 'Кнопка без границ'
}

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', view : 'plain' },
    icon : {
        block : 'icon',
        mods : { social : 'twitter' }
    }
}

Специализированные поля блока

Поле `name`

Тип: String.

Определяет уникальное имя блока.

Не используется, если модификатор type выставлен в значение link.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Test_1',
    val : 'passed',
    text : 'Проверить результат'
}

Поле `val`

Тип данных: String, Number.

Определяет значение кнопки, которое будет отправлено на сервер.

Не используется, если модификатор type выставлен в значение link.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Test_1',
    val : 'passed',
    text : 'Проверить результат'
}

Поле `text`

Тип: String.

Определяет текст, который отображается на кнопке.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Test_1',
    val : 'passed',
    text : 'Проверить результат'
}

Примечание Поле text позволяет определить текст кнопки и подходит для решения большинства задач, однако через него нельзя задать произвольный BEMJSON. В случае если необходимо внутри блока button определить некую HTML-разметку, нужно использовать поле content.

Поле `url`

Тип: String.

Определяет адрес, по которому осуществляется переход при нажатии на кнопку с модификатором type в значении link.

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

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'link' },
    url : 'https://bem.info/',
    text : 'Попробуй БЭМ'
}

Поле `icon`

Тип: BEMJSON.

Определяет иконку, которая отображается на кнопке. Иконка задается с помощью блока icon.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm' },
    text : 'Twitter',
    icon : {
        block : 'icon',
        mods : { social : 'twitter' }
    }
}

Поле `title`

Тип: String.

Определяет содержание всплывающей подсказки. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Тест №1',
    val : 'Пройден успешно',
    text : 'Проверить результат',
    title : 'Кнопка отправки результатов теста'
}

Поле `id`

Тип: String.

Определяет уникальный идентификатор кнопки.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Тест №1',
    val : 'Пройден успешно',
    text : 'Проверить результат',
    id : 'Unique_1'
}

Поле `tabIndex`

Тип: Number.

Определяет порядок получения фокуса при переходе между контролами с помощью клавиши Tab.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Тест №1',
    val : 'Пройден успешно',
    text : 'Проверить результат',
    id :'val_1',
    tabIndex : 2
}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

button.ru.md

button.ru.md

button

Обзор блока

Модификаторы блока

Специализированные поля блока

Описание блока

Модификаторы блока

Модификатор `type`

Кнопка-ссылка (модификатор `type` в значении `link`)

Кнопка отправки формы (модификатор `type` в значении `submit`)

Модификатор `togglable`

Кнопка-переключатель (модификатор `togglable` в значении `check`)

Радиокнопка (модификатор `togglable` в значении `radio`)

Модификатор `disabled`

Модификатор `focused`

Модификатор `pressed`

Модификатор `hovered`

Модификатор `theme`

Модификатор `size`

Модификатор `view`

Кнопка действия (модификатор `view` в значении `action`)

Псевдокнопка (модификатор `view` в значении `pseudo`)

Кнопка без границ (модификатор `view` в значении `plain`)

Специализированные поля блока

Поле `name`

Поле `val`

Поле `text`

Поле `url`

Поле `icon`

Поле `title`

Поле `id`

Поле `tabIndex`

Files

button.ru.md

Latest commit

History

button.ru.md

File metadata and controls

button

Обзор блока

Модификаторы блока

Специализированные поля блока

Описание блока

Модификаторы блока

Модификатор type

Кнопка-ссылка (модификатор type в значении link)

Кнопка отправки формы (модификатор type в значении submit)

Модификатор togglable

Кнопка-переключатель (модификатор togglable в значении check)

Радиокнопка (модификатор togglable в значении radio)

Модификатор disabled

Модификатор focused

Модификатор pressed

Модификатор hovered

Модификатор theme

Модификатор size

Модификатор view

Кнопка действия (модификатор view в значении action)

Псевдокнопка (модификатор view в значении pseudo)

Кнопка без границ (модификатор view в значении plain)

Специализированные поля блока

Поле name

Поле val

Поле text

Поле url

Поле icon

Поле title

Поле id

Поле tabIndex

Модификатор `type`

Кнопка-ссылка (модификатор `type` в значении `link`)

Кнопка отправки формы (модификатор `type` в значении `submit`)

Модификатор `togglable`

Кнопка-переключатель (модификатор `togglable` в значении `check`)

Радиокнопка (модификатор `togglable` в значении `radio`)

Модификатор `disabled`

Модификатор `focused`

Модификатор `pressed`

Модификатор `hovered`

Модификатор `theme`

Модификатор `size`

Модификатор `view`

Кнопка действия (модификатор `view` в значении `action`)

Псевдокнопка (модификатор `view` в значении `pseudo`)

Кнопка без границ (модификатор `view` в значении `plain`)

Поле `name`

Поле `val`

Поле `text`

Поле `url`

Поле `icon`

Поле `title`

Поле `id`

Поле `tabIndex`