Forum

Methodology

Toolbox

Platform

Community

desktop
touch-pad
touch-phone

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

Field Type description
name String The unique block name. Do not use when the type modifier is set to link.
val String The value to send to the server. Do not use when the type modifier is set to link.
text String Button lable.
url String Link address. Use only when the type modifier is set to link.
icon BEMJSON Button icon. It iscreated by the icon block.
title String Tooltip content.
id BEMJSON The button unique identifier.
tabIndex Number The order when navigating through controls on a page by pressing the Tab key.

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
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

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
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

An example of the button usage as a part of the radio-group:

Open in a new window

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

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

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

m

Open in a new window

l

Open in a new window

xl

Open in a new window

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
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
Open in a new window
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
Open in a new window

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

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

text field

Type: String.

Specifies the button lable.

Open in a new window

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

icon field

Type: BEMJSON.

Specifies the icon on the button. Declare the icon in BEMJSON using the icon block.

Open in a new window

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

id field

Type: String.

Specifies the unique identifier of the button.

Open in a new window

tabIndex field

Type: Number.

Specifies the tab order when pressing Tab to navigate between controls on a page.

Open in a new window
Instance methods:
getText
setText

Block button

Augments:control

Instance methods:

getText():String
description
Returns text of the button
setText(text):button
description
Sets text to the button
parameters
text
String

button_type_link

Instance methods:

getUrl():String
description
Returns url
setUrl(url):button
description
Sets url
parameters
url
String