Компонент Значок Badge

Создавайте красивые уведомительные значки. Стилизованный «значок» с текстовой информацией можно использовать как часть ссылки или кнопки, в качестве счетчика.

Выводите информацию в навигации или вкладках (табах) с количеством доступных единиц. Значки для создания ярлычков и вывода необходимой информации пользователям. Бейджик можно поместить в любую часть текстового контента сайта.

Создание бейджа

Информационный значок

Чтобы создать информационный значок, просто добавьте класс .uk-badge к строчному элементу, такому как <a> или <span>.

<span class="uk-badge"></span>

Значок можно использовать как часть ссылки или кнопки, в качестве счетчика.

  • 1 50 100
  • <div class="uk-margin-medium">
    	<span class="uk-badge">1</span>
    	<span class="uk-badge">50</span>
    	<span class="uk-badge">100</span>
    </div>
    
    <button type="button" class="uk-button uk-button-primary">
        Уведомления <span class="uk-badge">7</span>
    </button>

Badge и Карта

Обратите внимание на пример совместного использования Badge и компонента Карта.

  • Заметка

    Заголовок карты

    Если хочется собраться всей семьёй, выключаете Wi-Fi маршрутизатор и ждёте в комнате, где он расположен...

  • <article class="uk-card uk-card-default uk-card-body uk-width-1-2@m">
        <span class="uk-badge uk-card-badge">Заметка</span>
        <h3 class="uk-card-title">Заголовок карты</h3>
        <p>Если хочется собраться всей семьёй, выключаете Wi-Fi маршрутизатор и ждёте в комнате, где он расположен...</p>
    </article>

Badge