button
Use this block for creating different types of buttons.
Overview
Modifiers of the block
| Modifier |
Acceptable values |
Use cases |
Description |
| type |
'link', 'submit' |
BEMJSON |
The type of button. |
| togglable |
'check', 'radio' |
BEMJSON |
The toggle button. |
| disabled |
true |
BEMJSON, JS |
The disabled state. |
| focused |
true |
BEMJSON, JS |
The block is in focus. |
| pressed |
true |
– |
The pressed state. |
| hovered |
true |
– |
The hovered state. |
| theme |
'islands' |
BEMJSON |
A custom design. |
| size |
's', 'm', 'l', 'xl' |
BEMJSON |
The size of the button. Use sizes only for buttons with the theme modifier set to islands. |
| view |
'action', 'pseudo', 'plain' |
BEMJSON |
Visual highlighting. |
Custom fields of the block
Block description
Use the button block to control the size, state, and appearance of the button.
Modifiers of the block
type modifier
Acceptable values: 'link', 'submit'.
Use case: BEMJSON.
Link-button (type modifier with link value)
Use the type modifier with the link value to create a button that does to the address specified in the url field.
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">Try BEM!</span></a>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
},
url: 'https://bem.info/',
text: 'Try BEM!'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
}
}
]
Form submit button (type modifier with submit value)
Use the type modifier with the submit value for creating the button to send data to the server. This button type must be a part of a form.
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">Send data</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
text: 'Send data'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
togglable modifier
Acceptable values: 'check', 'radio'.
Use case: BEMJSON.
Defines behavior of the pressed button.
Toggle button (togglable modifier with check value)
The first click presses the button, and the second one releases it.
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">I am pressed</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'check'
},
text: 'I am pressed'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'check'
}
}
]
Radio-button (togglable modifier with radio value)
The first click presses the button, and it cannot be released manually.
This button type is used as a part of a radio-group.
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">I am toggled</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'radio'
},
text: 'I am toggled'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'radio'
}
}
]
An example of the button usage as a part of the radio-group:
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">First</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 radio_checked i-bem" data-bem='{"radio":{}}'><button class="button button_togglable_radio button_checked button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="true"><span class="button__text">Second</span></button><input class="radio__control" type="radio" autocomplete="off" name="radio-button" value="2" checked="checked"></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">Third</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',
val: 2,
options: [
{
val: 1,
text: 'First'
},
{
val: 2,
text: 'Second'
},
{
val: 3,
text: 'Third'
}
]
}
[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
togglable: 'radio'
}
}
]
disabled modifier
Acceptable value: true.
Use case: BEMJSON, JS.
The modifier makes the block inactive. The disabled block is visible but not available for user actions.
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">Disabled</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
text: 'Disabled'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
focused modifier
Acceptable value: true.
Use case: BEMJSON, JS.
The modifier puts the focus on the block.
{
block : 'button',
mods : { theme : 'islands', size : 'm', focused : true },
text : 'In focus'
}
pressed modifier
Acceptable value: true.
Use case: – .
The modifier is added to the button automatically at the moment when the button is pressed.
This modifier is used for buttons with the togglable modifier.
hovered modifier
Acceptable value: true.
Use case: – .
The modifier is added to the block automatically at the moment when you mouse over it.
theme modifier
Acceptable value: 'islands'.
Use case: BEMJSON.
The modifier gives the block a custom design.
The islands theme requires the size modifier.
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 theme</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'Islands theme'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
}
}
]
size modifier
Acceptable values for the islands theme: 's', 'm', 'l', 'xl'.
Use case: BEMJSON.
Use the size modifier only for blocks with the islands theme.
Sets the size value for all types of buttons.
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">Size s</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 's'
},
text: 'Size 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">Size m</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'Size 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">Size l</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'l'
},
text: 'Size 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">Size xl</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'xl'
},
text: 'Size xl'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
view modifier
Acceptable values: 'action', 'pseudo', 'plain'.
Use case: BEMJSON.
Action button (view modifier with action value)
The modifier visually highlights the button on a page. For example, use it to create a promo button:
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">Buy now!</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'action'
},
text: 'Buy now!'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'action'
}
}
]
Pseudobutton (view modifier with pseudo value)
The modifier changes visual representation of the button. For example, use it if you do not need to focus attention on the button:
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">With transparent background</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'pseudo'
},
text: 'With transparent background'
}
[
{
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">Without borders</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'pseudo',
disabled: true
},
text: 'Without borders'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'pseudo',
disabled: true
}
}
]
Borderless button (view modifier with plain value)
Use this modifier to create a button based on the other block. For example, iconed-button (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">Borderless button</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'plain'
},
text: 'Borderless button'
}
[
{
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'
}
}
]
Custom fields of the block
name field
Type: String.
Specifies the block unique name.
Do not use the name field when type modifier is set to 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">Check results</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test_1',
val: 'passed',
text: 'Check results'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
val field
Type: String, Number.
Specifies the value to send to the server.
Do not use the val field when type modifier is set to 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">Check results</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test_1',
val: 'passed',
text: 'Check results'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
text field
Type: String.
Specifies the button lable.
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">Check results</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test_1',
val: 'passed',
text: 'Check results'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
Note The text field is used for defining the button text in most cases, but you can't use it for setting custom BEMJSON. If you need to put HTML markup inside a button block, use the content field instead.
url field
Type: String.
Specifies the link address that will be opened by clicking the link-button.
Use the url field for link-buttons only.
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">Try BEM!</span></a>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
},
url: 'https://bem.info/',
text: 'Try BEM!'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
}
}
]
icon field
Type: BEMJSON.
Specifies the icon on the button. Declare the icon in BEMJSON using the icon block.
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 title
Type: String.
Specifies the tooltip content. The tooltip appearance depends on the browser and your operating system settings. You cannot change it applying HTML or different styles.
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="This button shows the test results" type="submit" name="Test #1" value="Passed"><span class="button__text">Check the result</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test #1',
val: 'Passed',
text: 'Check the result',
title: 'This button shows the test results'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
id field
Type: String.
Specifies the unique identifier of the button.
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="Test #1" value="Passed"><span class="button__text">Check the result</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test #1',
val: 'Passed',
text: 'Check the result',
id: 'Unique_1'
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
tabIndex field
Type: Number.
Specifies the tab order when pressing Tab to navigate between controls on a page.
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="3" type="submit" name="Test #1" value="Passed"><span class="button__text">Check the result</span></button>
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test #1',
val: 'Passed',
text: 'Check the result',
tabIndex: 3
}
[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]