Классы кнопок, описанные в этой инструкции, могут быть применены к элементам, например как input[type="submit"] или кнопки, таким образом, чтобы пользователь мог взаимодействовать в этим.
Как минимум, кнопка должна получить базовый класс ipsButton, а также класс размера и класс стиля (описание ниже).
Стили кнопок
ipsButton_normal
ipsButton_primary
ipsButton_alternate
ipsButton_important
ipsButton_light
ipsButton_veryLight
ipsButton_overlaid
ipsButton_link
Размеры кнопок
ipsButton_medium
ipsButton_verySmall
ipsButton_small
ipsButton_large
ipsButton_veryLarge
ipsButton_fullWidth
Может быть объединена с другими размерами, указанными выше.
Отключённые кнопки
Кнопки могут быть визуально неактивными, либо путём добавления класса ipsButton_disabled, либо указания свойства disabled к элементу ввода input. Например:
<a href='#' class='ipsButton ipsButton_normal ipsButton_medium ipsButton_disabled'>Неактивная кнопка (ссылка)</a> <input type='submit' class='ipsButton ipsButton_normal ipsButton_medium' disabled value='Неактивная кнопка (input)'>
Это будет выглядеть примерно так:
Совместные кнопки
Совместные кнопки позволяют вам легко создавать панели инструментов, указав список кнопок, которые отображаются совместно друг с другом.
Они создаются с помощью специального класса ipsButton_split в элементе обложки, содержащем две или более кнопки. Элемент обложки может быть тегом <ul>, или любым другим по смыслу тегом.
Все кнопки в группе совместных кнопок должны быть одинакового размера, в противном случае результаты отображения будут непредсказуемы. К каждой кнопке могут быть применены различные стили.
<ul class='ipsButton_split'> <li><a href='#' class='ipsButton ipsButton_small ipsButton_primary'>Кнопка 1</a></li> <li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Кнопка 2</a></li> <li><a href='#' class='ipsButton ipsButton_small ipsButton_light'>Кнопка 3</a></li> </ul>