UI-Kit

Кнопки

Используй кнопки как есть. НЕ пиши без лишней необходимости дополнительные классы через которые будешь добавлять отступы от соседних элементов! Для этого создай обертку для кнопки по месту - ей добавляй свойста для размещения относительно других элементов, а равно и кнокпи внутри нее.

В макете возможны ситуация, когда на мобильное версии используется например small size, а на планшете medium size. В этом случае используй кнопку для мобильного, так как адаптив новых страниц делаем с использованием подхода mobile-first. Кнопке добавь класс модификатор по БЭМ - .buttom--some-modify. Через этот класс достилизуй кнопку в медиазапросах.

Кнопки - large size

Без Иконок

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

Иконки слева

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

Иконки справа

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

100% родителя

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

Кнопки - normal size

Без Иконок

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

Иконки слева

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

Иконки справа

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

100% родителя

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

Кнопки - medium size

Без Иконок

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

Иконки слева

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

Иконки справа

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

100% родителя

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

Кнопки - small size

Без Иконок

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

Иконки слева

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

Иконки справа

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

100% родителя

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

Поля форм

Без Иконок

  • Обычное
    Warning
    Error
    Loading
    Success
  • disabled
    Warning
    Error
    Loading
    Success
  • Error
    Warning
    Error
    Loading
    Success
  • Warning
    Warning
    Error
    Loading
    Success
  • Loading
    Warning
    Error
    Loading
    Success
  • Success
    Warning
    Error
    Loading
    Success

Иконки слева

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

Иконки справа

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a

100% родителя

  • Тег button
  • Тег button disabled - через атрибут disabled!
  • Тег a