Работа с размерами кнопок

Библиотека Carbon Components Svelte предоставляет гибкий и стандартизированный способ управления размерами кнопок через встроенные свойства компонентов. Размер кнопок является важным аспектом интерфейса, так как он влияет на восприятие, удобство использования и визуальную иерархию элементов.

Свойства размера кнопки

Компонент Button в Carbon Svelte поддерживает несколько ключевых свойств, которые напрямую влияют на его размер:

  • size – основной параметр для задания размера кнопки.
  • kind – косвенно влияет на визуальное оформление, что может создавать эффект визуальной “весомости” кнопки.
  • small – булевое свойство, упрощающее быстрый переход к компактному виду кнопки.
Возможные значения size:
Значение Описание
sm Маленькая кнопка, используется в ограниченном пространстве
md Стандартная кнопка, подходящая для большинства интерфейсов
lg Крупная кнопка для акцентирования и повышения кликабельности

Пример использования:

<script>
  import { Button } from 'carbon-components-svelte';
</script>

<Button size="sm">Маленькая кнопка</Button>
<Button size="md">Средняя кнопка</Button>
<Button size="lg">Большая кнопка</Button>

Булевое свойство small

Иногда достаточно быстрого способа уменьшить кнопку без явного указания размера. Для этого используется свойство small:

<Button small>Компактная кнопка</Button>

Эта запись эквивалентна:

<Button size="sm">Компактная кнопка</Button>

Использование small предпочтительно для простых сценариев и когда требуется единообразие стиля по всей библиотеке.

Влияние размера на типы кнопок

Компонент Button поддерживает несколько видов кнопок через свойство kind:

  • primary – основная кнопка интерфейса.
  • secondary – второстепенная кнопка.
  • tertiary – кнопка с минимальной визуальной нагрузкой.
  • danger – кнопка, сигнализирующая об опасных действиях.
  • ghost – кнопка с прозрачным фоном.

Размер кнопки влияет на восприятие каждого типа. Например, primary кнопка в размере lg становится визуально доминирующим элементом, привлекающим внимание пользователя к ключевому действию, тогда как tertiary кнопка в размере sm служит для менее значимых операций.

Пример сочетания размера и типа:

<Button kind="primary" size="lg">Подтвердить</Button>
<Button kind="secondary" size="md">Отмена</Button>
<Button kind="danger" size="sm">Удалить</Button>

Адаптивность и медиа-запросы

Размеры кнопок можно динамически менять в зависимости от ширины экрана или других условий. В Svelte это удобно делать через реактивные переменные:

<script>
  import { Button } from 'carbon-components-svelte';
  let buttonSize = 'md';

  function adjustSize(width) {
    if (width < 480) buttonSize = 'sm';
    else if (width < 1024) buttonSize = 'md';
    else buttonSize = 'lg';
  }

  window.addEventListener('resize', () => adjustSize(window.innerWidth));
  adjustSize(window.innerWidth);
</script>

<Button size={buttonSize}>Адаптивная кнопка</Button>

Таким образом, кнопка автоматически подстраивается под размер экрана, сохраняя читаемость и кликабельность.

Стилизация кнопок по размеру

Каждый размер кнопки в Carbon Components Svelte имеет собственные отступы, высоту и размеры шрифта:

Размер Высота Отступы Размер шрифта
sm 32px 8px 16px 14px
md 40px 12px 20px 16px
lg 48px 16px 24px 18px

Использование размеров напрямую влияет на согласованность интерфейса. При необходимости кастомизации этих параметров можно применять CSS-переменные Carbon или собственные стили:

<style>
  :global(.custom-large-button) {
    --cds-button-height: 60px;
    --cds-button-padding: 20px 32px;
    font-size: 20px;
  }
</style>

<Button class="custom-large-button">Кастомная кнопка</Button>

Практические рекомендации

  • Маленькие кнопки (sm) лучше использовать для второстепенных действий или в компактных панелях инструментов.
  • Средние кнопки (md) являются универсальным выбором для большинства интерфейсных элементов.
  • Большие кнопки (lg) применяются для акцентирования ключевых действий и улучшения видимости на крупных экранах.
  • Сочетание размеров с kind позволяет формировать четкую визуальную иерархию действий.
  • Адаптивное управление размером повышает доступность интерфейса на мобильных и десктопных устройствах.

Размер кнопки в Carbon Components Svelte — это не только визуальный параметр, но и инструмент для улучшения пользовательского опыта и структурирования интерфейса.

Оглавление