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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
},
url: 'https://bem.info/',
text: 'Try BEM!'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
text: 'Send data'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'check'
},
text: 'I am pressed'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'check'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'radio'
},
text: 'I am toggled'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
togglable: 'radio'
}
}
]
deps
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>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'radio-group',
mods: {
theme: 'islands',
size: 'm',
type: 'button',
togglable: 'radio'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
disabled: true
},
text: 'Disabled'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
disabled: true
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'Islands theme'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 's'
},
text: 'Size 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">Size m</span></button>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm'
},
text: 'Size 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">Size l</span></button>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'l'
},
text: 'Size 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">Size xl</span></button>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'xl'
},
text: 'Size xl'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'xl'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'action'
},
text: 'Buy now!'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'action'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'pseudo'
},
text: 'With transparent background'
}
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">Without borders</span></button>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'pseudo',
disabled: true
},
text: 'Without borders'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'pseudo',
disabled: true
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
view: 'plain'
},
text: 'Borderless button'
}
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
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test_1',
val: 'passed',
text: 'Check results'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test_1',
val: 'passed',
text: 'Check results'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test_1',
val: 'passed',
text: 'Check results'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
},
url: 'https://bem.info/',
text: 'Try BEM!'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'link'
}
}
]
deps
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>
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
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>
HTML{
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'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test #1',
val: 'Passed',
text: 'Check the result',
id: 'Unique_1'
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
deps
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>
HTML{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
},
name: 'Test #1',
val: 'Passed',
text: 'Check the result',
tabIndex: 3
}
BEMJSON[
{
block: 'button',
mods: {
theme: 'islands',
size: 'm',
type: 'submit'
}
}
]
deps