Компонент Button

Button Primary

State=Default

State=Default 2

State=Disabled

State=Selected

Link

Device=Mob, Icon=Right

Device=Mob, Icon=Left

Device=Desk, Icon=Right

Device=Desk, Icon=Left

Button Icon

Theme=White

Theme=Dark

Интерактивное демо

Размер:

Состояние:

Тема:

Иконка слева:

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

Кликов: 0

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

Базовая кнопка

<Button text="Нажми меня" />
<Button size="big" theme="primary" text="Большая кнопка" />

Кнопка с иконками

<Button 
  text="С иконкой" 
  iconRight="arrow-right" 
/>
<Button 
  text="С двумя иконками" 
  iconLeft="close" 
  iconRight="arrow-right" 
/>

Состояния

<Button state="disabled" text="Отключена" />
<Button state="selected" text="Выбрана" />
<Button state="default2" text="Вторичная" />

Слоты

<Button>
  <Icon name="heart" />
  Любимое
</Button>

Спецификации

Props

size - размер кнопки (small, medium, big)
state - состояние (default, default2, disabled, selected)
theme - тема (primary, secondary, white, dark)
iconLeft - иконка слева
iconRight - иконка справа
text - текст кнопки

Размеры

small - 32px высота, 14px шрифт
medium - 40px высота, 16px шрифт, скругленные углы
big - 48px высота, 18px шрифт, скругленные углы

Состояния

default - обычное состояние
default2 - альтернативное состояние
disabled - отключенное состояние
selected - выбранное состояние с галочкой

Темы

primary - желтый фон, черный текст
secondary - серый фон, черный текст
white - белый фон, черный текст, рамка
dark - темный фон, белый текст