Текст кнопки

Библиотека Noty позволяет создавать интерактивные уведомления с кнопками, текст которых можно полностью настраивать. Управление текстом кнопок — важный аспект пользовательского интерфейса, влияющий на понятность и удобство взаимодействия.

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

Кнопки в Noty добавляются через параметр buttons, который принимает массив объектов Noty.button. Каждый такой объект описывает отдельную кнопку, включая её текст.

Пример базового создания уведомления с кнопкой:

new Noty({
  text: 'Удалить файл?',
  buttons: [
    Noty.button('Да', 'btn btn-success', function () {
      console.log('Удалено');
    })
  ]
}).show();

Структура метода Noty.button

Noty.button(text, className, callback, attributes)
  • text — текст кнопки (основной параметр)
  • className — CSS-классы для стилизации
  • callback — функция, вызываемая при клике
  • attributes — дополнительные HTML-атрибуты (необязательно)

Текст кнопки: основные принципы

1. Простая строка

Текст может быть любой строкой:

Noty.button('ОК', 'btn btn-primary', function () {})

2. Многоязычность

Текст кнопки может динамически изменяться в зависимости от языка интерфейса:

const lang = 'ru';

const texts = {
  ru: 'Подтвердить',
  en: 'Confirm'
};

Noty.button(texts[lang], 'btn btn-success', function () {});

Использование HTML в тексте кнопки

Noty поддерживает HTML внутри текста кнопки. Это позволяет добавлять иконки, форматирование и дополнительные элементы.

Noty.button('<b>Да</b>', 'btn btn-success', function () {});

Пример с иконкой:

Noty.button('<i class="fa fa-check"></i> Подтвердить', 'btn btn-success', function () {});

Важно учитывать:

  • HTML не экранируется автоматически
  • требуется контроль безопасности (например, при использовании пользовательских данных)

Динамическое изменение текста

Текст кнопки можно формировать на основе данных или состояния приложения.

Пример:

let isSaved = false;

new Noty({
  text: 'Сохранить изменения?',
  buttons: [
    Noty.button(
      isSaved ? 'Сохранено' : 'Сохранить',
      'btn btn-primary',
      function () {}
    )
  ]
}).show();

Обновление текста после создания

Noty не предоставляет встроенного API для изменения текста кнопки после рендера, но это можно сделать через DOM.

Пример:

let notification = new Noty({
  text: 'Обработка...',
  buttons: [
    Noty.button('Ждать', 'btn btn-warning', function () {})
  ]
}).show();

// изменение текста через DOM
setTimeout(() => {
  document.querySelector('.noty_buttons button').innerText = 'Готово';
}, 2000);

Работа с несколькими кнопками

При использовании нескольких кнопок важно выбирать понятные и короткие тексты.

new Noty({
  text: 'Сохранить изменения?',
  buttons: [
    Noty.button('Да', 'btn btn-success', function () {}),
    Noty.button('Нет', 'btn btn-danger', function () {}),
    Noty.button('Отмена', 'btn btn-secondary', function () {})
  ]
}).show();

Рекомендации:

  • избегать длинных формулировок
  • использовать глаголы действия
  • соблюдать единый стиль

Передача параметров в callback через текст

Текст кнопки может использоваться как часть логики:

function handleClick(action) {
  console.log(action);
}

new Noty({
  text: 'Выберите действие',
  buttons: [
    Noty.button('Удалить', 'btn btn-danger', function () {
      handleClick('delete');
    }),
    Noty.button('Архивировать', 'btn btn-warning', function () {
      handleClick('archive');
    })
  ]
}).show();

Кастомизация через атрибуты

Дополнительные атрибуты позволяют расширить поведение кнопок:

Noty.button(
  'Подробнее',
  'btn btn-info',
  function () {},
  { id: 'more-info-btn', 'data-action': 'info' }
);

Это может быть полезно для:

  • тестирования (например, селекторы)
  • интеграции с другими скриптами

Стилизация текста кнопки

Текст кнопки наследует стили CSS. Можно управлять:

  • размером шрифта
  • цветом
  • межбуквенным интервалом

Пример:

.noty_buttons .btn {
  font-size: 14px;
  font-weight: bold;
}

Обработка длинного текста

Если текст слишком длинный, возможны проблемы с версткой. Подходы:

1. Ограничение длины

const text = 'Очень длинный текст кнопки...'.slice(0, 20);

2. Перенос строк

.noty_buttons button {
  white-space: normal;
}

Практические шаблоны текстов кнопок

Подтверждение действия

  • “Да” / “Нет”
  • “Подтвердить” / “Отмена”

Уведомления

  • “ОК”
  • “Закрыть”

Ошибки

  • “Повторить”
  • “Отмена”

Ошибки при работе с текстом кнопок

Использование небезопасного HTML

Noty.button(userInput, 'btn', function () {});

Риск XSS-атаки при передаче пользовательского ввода.

Слишком длинные тексты

Усложняют восприятие и портят интерфейс.

Непоследовательность

Разные кнопки с похожим смыслом, но разными формулировками:

  • “ОК” и “Подтвердить”
  • “Закрыть” и “Отмена”

Итоговая структура кнопки с продуманным текстом

new Noty({
  text: 'Удалить элемент?',
  buttons: [
    Noty.button(
      '<i class="fa fa-trash"></i> Удалить',
      'btn btn-danger',
      function () {
        console.log('Удаление');
      }
    ),
    Noty.button(
      'Отмена',
      'btn btn-secondary',
      function () {
        this.close();
      }
    )
  ]
}).show();

Грамотно подобранный текст кнопки повышает понятность интерфейса, снижает вероятность ошибок пользователя и делает взаимодействие с уведомлениями более эффективным.

Оглавление