-
Notifications
You must be signed in to change notification settings - Fork 0
Button
Кнопки в проекте — важный элемент интерфейса, он выполняет схожую с ссылками действия. Что-то запускают: форму, расчет чего-либо, выполняют роль выделенного призыва к действию (CTA).
В данном проекте созданы простые кнопки, которые имеют несколько состояний. Если в вашем дизайне кнопки отличаются от стандартных, рекомендуем не включать этот блок в проект.
Кнопки можно применить практически к любому тегу, так как в них указано отключение стандартного поведения:
<button class="button button--primary">Button</button>
<input class="button button--primary" type="button" value="input:button"/>
<a class="button button--primary" href="#">С ссылкой</a>
<a class="button button--primary">Без ссылки</a>
<span class="button button--primary button--disabled">Disabled</span>
<span class="button button--primary" disabled>Disabled</span>Цвета кнопок формируются из массива с цветами. И так, как предусмотрены светлые кнопки, для таки классов, как .button--white и .button--light предусмотрена проверка, в них текст кнопки будет темным. Цвета для них можно поменять, они формируются из массива, который соответствует маркеру цвета.
Если использовать кнопку без модификатора, то цвет будет такой же, как если бы это был primary цвет.
Кнопки — это строчные элементы, которые, если будут расположены в коде с переносами, образуют соседние отступы друг-от-друга. Это специфика рендера строчных элементов.