Skip to content

Latest commit

 

History

History
498 lines (354 loc) · 11.5 KB

button.en.md

File metadata and controls

498 lines (354 loc) · 11.5 KB
Raw

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.
target String Link behavior. 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.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'link' },
    url : 'https://bem.info/',
    text : 'Try BEM!'
}
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.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    text : 'Send data'
}

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.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', togglable : 'check' },
    text : 'I am pressed'
}
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.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', togglable : 'radio' },
    text : 'I am toggled'
}

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

{
    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' }
    ]
}

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.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', disabled : true },
    text : 'Disabled'
}

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.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm' },
    text : 'Islands theme'
}

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

{
    block : 'button',
    mods : { theme : 'islands', size : 's' },
    text : 'Size s'
}

m

{
    block : 'button',
    mods : { theme : 'islands', size : 'm' },
    text : 'Size m'
}

l

{
    block : 'button',
    mods : { theme : 'islands', size : 'l' },
    text : 'Size l'
}

xl

{
    block : 'button',
    mods : { theme : 'islands', size : 'xl' },
    text : '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:

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', view : 'action' },
    text : 'Buy now!'
}
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:

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', view : 'pseudo' },
    text : 'With transparent background'
}
{
    block : 'button',
    mods : { theme : 'islands', size : 'm', view : 'pseudo', disabled : true },
    text : 'Without borders'
}
Borderless button (view modifier with plain value)

Use this modifier to create a button based on the other block. For example, iconed-button (icon).

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

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.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Test_1',
    val : 'passed',
    text : 'Check results'
}

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.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Test_1',
    val : 'passed',
    text : 'Check results'
}

text field

Type: String.

Specifies the button lable.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Test_1',
    val : 'passed',
    text : 'Check results'
}

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.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'link' },
    url : 'https://bem.info/',
    text : 'Try BEM!'
}

target field

Type: String.

Specifies the link behavior.

The field supports all HTML attribute values of the target: _blank, _self (default), _parent, _top.

Use the target field for link-buttons only.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'link' },
    url : 'https://bem.info/',
    target : '_blank',
    text : 'Try BEM!'
}

icon field

Type: BEMJSON.

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

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

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.

{
    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'
}

id field

Type: String.

Specifies the unique identifier of the button.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Test #1',
    val : 'Passed',
    text : 'Check the result',
    id : 'Unique_1'
}

tabIndex field

Type: Number.

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

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', type : 'submit' },
    name : 'Test #1',
    val : 'Passed',
    text : 'Check the result',
    tabIndex : 3
}