Компонент Button в WordPress позволяет пользователям выполнять действия и делать выбор одним щелчком. Он используется для взаимодействия с элементами интерфейса, встречается в модальных окнах, формах, панелях инструментов и других местах.
Рекомендации по использованию кнопок
- Кнопки должны быть точно обозначены и интуитивно понятны.
- Текст кнопок должен вести с сильного глагола, описывающего действие (например, «Сохранить изменения» вместо «Изменения»).
- Используйте установленные цвета для разных типов действий (например, красные кнопки для действий, которые сложно отменить).
- На экране желательно выделять только самые важные действия, чтобы пользователь знал, что делать дальше.
Типы кнопок
- Primary button: Высокий акцент. Обычно используется для основного действия.
- Default button: Средний акцент. Подходит для действий средней важности.
- Link button: Низкий акцент. Часто используется для вспомогательных действий, чтобы не отвлекать внимание.
Пример использования Button
import { Button } from '@wordpress/components';
const MyButtonExample = () => (
<Button variant="primary" onClick={() => alert('Кнопка нажата!')}>
Нажми меня!
</Button>
);
Описание параметров компонента Button
accessibleWhenDisabled
- Описание: Если
true, кнопка остается доступной для фокуса, даже когда она отключена. Рекомендуется для обеспечения доступности. - Тип:
boolean - Значение по умолчанию:
false - Пример
<Button accessibleWhenDisabled disabled>
Отключенная кнопка
</Button>
children
- Описание: Содержимое кнопки.
- Тип:
ReactNode - Пример:
<Button>
<span>Текст кнопки с иконкой</span>
</Button>
className
- Описание: Добавляет дополнительный CSS-класс к кнопке.
- Тип:
string - Пример
<Button className="my-custom-class">
Кнопка с кастомным классом
</Button>
description
- Описание: Текст для описания кнопки, предназначенный для обеспечения доступности.
- Тип:
string - Пример
<Button description="Описание кнопки">
Подсказка
</Button>
disabled
- Описание: Отключает кнопку.
- Тип:
boolean - Значение по умолчанию:
false - Пример
<Button disabled>
Недоступная кнопка
</Button>
href
- Описание: Превращает кнопку в ссылку.
- Тип:
string - Пример:
<Button href="https://example.com">
Переход по ссылке
</Button>
icon
- Описание: Добавляет иконку в кнопку.
- Тип:
IconProps<unknown>['icon'] - Пример
<Button icon="admin-generic">
Кнопка с иконкой
</Button>
iconPosition
- Описание: Положение иконки (слева или справа от текста).
- Тип:
'left' | 'right' - Значение по умолчанию:
left - Пример
<Button icon="admin-generic" iconPosition="right">
Кнопка с иконкой справа
</Button>
isBusy
- Описание: Указывает, что кнопка занята выполнением действия.
- Тип:
boolean - Значение по умолчанию:
false - Пример
<Button isBusy>
Загрузка...
</Button>
isDestructive
- Описание: Оформляет кнопку в стиле, предупреждающем об опасном действии.
- Тип:
boolean - Пример
<Button isDestructive>
Удалить
</Button>
isPrimary
- Описание: Устанавливает кнопку как основную.
- Тип:
boolean - Пример
<Button isPrimary>
Основная кнопка
</Button>
size
- Описание: Устанавливает размер кнопки (
default,compact,small). - Тип:
'default' | 'compact' | 'small' - Значение по умолчанию:
default - Пример
<Button size="small">
Маленькая кнопка
</Button>
target
- Описание: Определяет целевой атрибут для ссылки (
_blank,_selfи т.д.), еслиhrefзадан. - Тип:
string - Пример
<Button href="https://example.com" target="_blank">
Открыть в новой вкладке
</Button>
tooltipPosition
- Описание: Определяет положение всплывающей подсказки для кнопки.
- Тип:
PopoverProps['position'] - Пример
<Button showTooltip tooltipPosition="bottom">
С подсказкой снизу
</Button>
variant
- Описание: Устанавливает стиль кнопки (
primary,secondary,tertiary,link). - Тип:
'primary' | 'secondary' | 'tertiary' | 'link' - Пример
<Button variant="link">
Ссылка-кнопка
</Button>
Продвинутый пример с различными типами кнопок
import { Button } from '@wordpress/components';
const AdvancedButtonExample = () => (
<div>
<Button variant="primary" onClick={() => alert('Основное действие')}>
Основная кнопка
</Button>
<Button variant="secondary" onClick={() => alert('Второстепенное действие')}>
Вторая кнопка
</Button>
<Button variant="tertiary" icon="smiley" iconPosition="left">
Третья кнопка с иконкой
</Button>
<Button variant="link" href="https://example.com" target="_blank">
Кнопка-ссылка
</Button>
</div>
);
Иерархия (Hierarchy)
При проектировании интерфейсов с несколькими кнопками важно создать иерархию действий, где одна кнопка выступает в роли основной и расположена на видном месте. Это помогает пользователю быстро определить наиболее важное действие.
- Основная кнопка — размещена на видном месте и имеет высокий акцент, чтобы привлекать внимание пользователя.
- Средневыраженные кнопки — используются для второстепенных действий и имеют меньший акцент, чем основная кнопка.
- Кнопки с низким акцентом — применяются для действий, которые менее важны или выполняются реже.
При использовании нескольких кнопок важно, чтобы состояние доступной кнопки не выглядело так же, как состояние недоступной кнопки, чтобы избежать путаницы у пользователей. Например, можно использовать различные цвета или степени прозрачности для разделения этих состояний.
Размещение кнопок (Placement)
Тип кнопки помогает выразить уровень её важности и различить доступные действия на экране.
Пример использования акцентов для кнопок
Эта схема расположения кнопок включает следующие элементы:
- Primary button — используется для главного действия и имеет высокий акцент.
- Default button — выступает в качестве вспомогательной кнопки с средним акцентом.
- Link button — имеет самый низкий акцент, подходит для менее значимых действий.
Лучшие практики размещения кнопок
- Правильное размещение: при использовании нескольких кнопок в одном ряду расставьте их по убыванию значимости — самая важная кнопка должна быть ближе к кнопке с более низким акцентом (например, основная кнопка рядом с кнопкой по умолчанию, кнопка по умолчанию рядом с кнопкой-ссылкой).
- Избегайте конкуренции: не ставьте две основные кнопки рядом друг с другом — это может сбивать пользователя с толку. Используйте только одну основную кнопку в одном представлении.
- Не располагайте кнопки вертикально: если есть место, лучше разместить кнопки в один ряд, так как это более удобно и очевидно для пользователя.
- Осторожно с количеством кнопок: слишком много кнопок на одной странице может вызвать путаницу. Убедитесь, что на странице присутствуют только самые важные действия, чтобы пользователи могли легко определить, что нужно сделать.
Заключение
Компонент Button в WordPress предоставляет мощные и гибкие возможности для создания кнопок. Он помогает организовать элементы управления в интерфейсе, предоставляя пользователю понятные и интуитивно простые способы взаимодействия.