Компонент Кнопка Button

Создавайте красивые кнопки, которые могут быть разных стилей и размеров. Создать из кнопки выпадающий список, добавить в проект кнопки различной ширины.

Компонент Кнопка позволяет создать из кнопки выпадающий список, добавить в ваш проект кнопки различного стиля и ширины. Простое создание группы кнопок с Dropdown, кнопки с выпадающим навигационным списком меню.

Создание кнопок

Чтобы использовать в своём проекте компонент Кнопка, необходимо добавить класс .uk-button в элемент <a> или <button> и дополнительно добавить подходящий модификатор, например .uk-button-default.

Чтобы применить кнопке отключенное состояние, добавьте к элементу <button> атрибут disabled.

<a class="uk-button uk-button-default" href=""></a>
<button class="uk-button uk-button-default" type="button"></button>
<button class="uk-button uk-button-default" type="menu" disabled></button>
Заметка Если вы отображаете на больших экранах несколько кнопок в одном ряду, а на меньших областях просмотра может быть уже несколько строк, то можно автоматически добавить к ним margin (внешний отступ). Для автоматического добавления отступов добавьте атрибут uk-margin из компонента Внешний отступ к их родительскому элементу.

  • Ссылка 

  • <p uk-margin>
    <a class="uk-button uk-button-default" href="#">Ссылка</a>
    <button class="uk-button uk-button-default" type="button">Кнопка</button>
    <button class="uk-button uk-button-default" disabled>Отключено</button>
</p>

Модификатор «Стиль»

В UIkit 3 доступно несколько модификаторов для стиля кнопок. Просто добавьте один из следующих классов, чтобы применить другой вид.

Класс Описание
.uk-button-default Стиль кнопки по умолчанию.
.uk-button-primary Указывает на основной цвет и действие. Кнока с заметным стилем.
.uk-button-secondary Указывает на важное действие. Кнопка с тёмным цветом.
.uk-button-danger Указывает на опасное или отрицательное действие.
.uk-button-text Применяется альтернативный, типографский стиль.
.uk-button-link Применяет простой стиль ссылки. 
<button class="uk-button uk-button-primary"></button>


  • <p uk-margin>
    <button class="uk-button uk-button-default">Default</button>
    <button class="uk-button uk-button-primary">Primary</button>
    <button class="uk-button uk-button-secondary">Secondary</button>
    <button class="uk-button uk-button-danger">Danger</button>
    <button class="uk-button uk-button-text">Текст</button>
    <button class="uk-button uk-button-link">Ссылка</button>
</p>

Модификатор «Размер»

С модификатором Размер можно сделать кнопку и маленькую и большую. Добавьте к кнопке класс .uk-button-small или .uk-button-large, чтобы сделать размер кнопки меньше или больше. 

<button class="uk-button uk-button-default uk-button-small"></button>

<button class="uk-button uk-button-default uk-button-large"></button>


  • <p uk-margin>
    <button class="uk-button uk-button-default uk-button-small">Маленькая кнопка</button>
    <button class="uk-button uk-button-primary uk-button-small">Маленькая кнопка</button>
    <button class="uk-button uk-button-secondary uk-button-small">Маленькая кнопка</button>
</p>
<p uk-margin>
    <button class="uk-button uk-button-default uk-button-large">Большая кнопка</button>
    <button class="uk-button uk-button-primary uk-button-large">Большая кнопка</button>
    <button class="uk-button uk-button-secondary uk-button-large">Большая кнопка</button>
</p>

Модификатор «Ширина»

Добавьте класс .uk-width-1-1 из компонента Ширина элементов и кнопка займет всю доступную ширину. Всё просто!

Пример

  • <button class="uk-button uk-button-default uk-width-1-1 uk-margin-small-bottom">Широкая кнопка</button>
<button class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom">Широкая кнопка</button>
<button class="uk-button uk-button-secondary uk-width-1-1">Широкая кнопка</button>

Группа кнопок

Создание группы кнопок

Чтобы создать группу кнопок, добавьте к элементу <div> вокруг кнопок класс .uk-button-group. Готово! Всё работает! Никакой дополнительной разметки не требуется. 

<div class="uk-button-group">
    <button class="uk-button uk-button-default"></button>
    <button class="uk-button uk-button-default"></button>
    <button class="uk-button uk-button-default"></button>
</div>

  • <div>
    <div class="uk-button-group">
        <button class="uk-button uk-button-secondary">Кнопка</button>
        <button class="uk-button uk-button-secondary">Кнопка</button>
        <button class="uk-button uk-button-secondary">Кнопка Secondary</button>
    </div>
</div>
<div class="uk-margin-small">
    <div class="uk-button-group">
        <button class="uk-button uk-button-primary">Кнопка</button>
        <button class="uk-button uk-button-primary">Кнопка</button>
        <button class="uk-button uk-button-primary">Кнопка Primary</button>
    </div>
</div>
<div>
    <div class="uk-button-group">
        <button class="uk-button uk-button-danger">Кнопка</button>
        <button class="uk-button uk-button-danger">Кнопка</button>
        <button class="uk-button uk-button-danger">Кнопка Danger</button>
    </div>
</div>
  • Кнопка сброса в форме 
  • <form class="uk-width-medium@m uk-position-relative" action="">
	<legend class="uk-legend uk-text-center">Кнопка сброса в форме</legend>

	<div class="uk-margin">
		<input class="uk-input" name="Имя" type="text" placeholder="Имя" required>
	</div>
	<div class="uk-margin">
		<input class="uk-input" name="E-mail" type="email" placeholder="E-mail" required>
	</div>
	<div class="uk-margin uk-button-group">
		<button type="submit" class="uk-button uk-button-primary uk-disabled">Отправить</button>
		<button type="reset" class="uk-button uk-button-default" uk-tooltip="title: Очистить; pos: bottom"><span uk-icon="trash"></span></button>
	</div>
</form>

Выпадающее меню

Выпадающий список из кнопки

Обычная кнопка может быть использована для вызова выпадающего меню навигации из компонента Выпадающий список : Dropdown. 

<!-- Кнопка переключения выпадающего списка Dropdown -->
<button class="uk-button uk-button-default" type="button"></button>
<div uk-dropdown></div>

  • <div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Dropdown</button>
    <div uk-dropdown>
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Активный пункт</a></li>
            <li><a href="#">Пункт</a></li>
            <li class="uk-nav-header">Заголовок</li>
            <li><a href="#">Пункт</a></li>
            <li><a href="#">Ещё пункт</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Отдельный пункт</a></li>
        </ul>
    </div>
</div>

Группа кнопок и Dropdown

Группа кнопок и выпадающие списки Dropdown

Используйте группы кнопок, чтобы расположить кнопки в стандартном виде: основная кнопка слева и выпадающий переключатель справа. Оберните переключающую кнопку и раскрывающийся список внутри элемента <div> и добавьте класс .uk-inline из компонента вспомогательных классов Utility. 

<!-- Группа кнопок с выпадающим меню Dropdown -->
<div class="uk-button-group">
    <button class="uk-button uk-button-default"></button>
    
    <div class="uk-inline">
        <!-- Кнопка переключения выпадающего -->
        <button class="uk-button uk-button-default" type="button"></button>
        <div uk-dropdown="mode: click; target: !.uk-button-group;"></div>
    </div>
    
</div>

  • <div class="uk-button-group">
    <button class="uk-button uk-button-default">Dropdown</button>
    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button" aria-label="Переключить выпадающий список">
            <span uk-icon="icon: triangle-down"></span>
        </button>
        <div uk-dropdown="mode: click; target: !.uk-button-group;">
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Активный пункт</a></li>
                <li><a href="#">Пункт</a></li>
                <li class="uk-nav-header">Заголовок</li>
                <li><a href="#">Пункт</a></li>
                <li><a href="#">И ещё пункт</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Отдельный пункт</a></li>
            </ul>
        </div>
    </div>
</div>