Button

Кнопка — основной интерактивный компонент любого интерфейса. Текст в кнопке — это команда которую пользователь даёт системе — глагол неопределённой формы несовершенного вида, отвечающий на вопрос что делать: открыть, загрузить, перейти, закрыть. Может быть существительным — названием раздела или сценария, который запустится после нажатия: профиль, меню, регистрация. Либо наречием в диалоговом окне: понятно, отлично, выражающим положительное отношение пользователя к сообщению на экране.

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

HTML

Предположим - круглая кнопка на которой включается лоадер. Значение атрибута rounded передавать в разметку не надо.

<ds-button id="button" rounded text="Я твоя кнопка!"></ds-button>

<script>
  setTimeout(() => {
    const button = document.getElementById('button');
    if (button) {
      button.setAttribute('loading', true);

      setTimeout(() => {
        const button = document.getElementById('button');
        if (button) button.removeAttribute('loading');
      }, 1000);
    }
  }, 1000);
</script>

React

<Button _loading={loading ? 'true' : 'false'} text="Я твоя кнопка с лоадером в Реакт!" rounded></Button>

Подробнее читайте в разделе Привязывание логических атрибутов и смотрите репозитории фрейворков с примерами.

API

Props

Name	Type	Description	Default
token	String: ['primary', 'secondary']	Основной "тип" кнопки, два возможных значения	'primary'
size	String: ['helike', 'polyxo', 'laripha']	Размер кнопки, для rounded указывать бессмысленно, они всегда 'laripha'	'helike'
color	enum Colors: ['rocky', 'matrix', 'lebowski', 'fargo', 'fightclub', 'gentlemen', 'aquaman', 'metropolis']	Цвет кнопки, работает только когда token="primary"	'rocky'
text	String	Текст кнопки	''
icon	String	Иия иконки (без '_16' в конце)	''
rounded	Boolean	Скругленная кнопка?	false
wide	Boolean	Ширина кнопки по контенту или по доступному месту?	false
_wide	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined
disabled	Boolean	Неактивная, "выключенная" кнопка?	false
_disabled	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined
loading	Boolean	Происходит загрузка по кнопке?	false
_loading	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined

Примеры проектов

React

Angular

Vue