Button#

Кнопки позволяют пользователям выполнять действия и делать выбор одним нажатием.

№	Свойство	Описание	Значение по умолчанию
1	classes	JSS-классы для стилизации. `Partial<Record<"button" / "small" / "text" / "error" / "contained" / "outlined" / "ghost" / "primary" / "secondary" / "medium" / "large" / "fullWidth", string>>`	-
2	kind	Тип кнопки: primary — стандартная, ghost — текстовая, outlined — контурная, contained	contained
3	color	Цветовая схема кнопки: primary — по-умолчанию, secondary — черно-белая, error — предупреждающая необратимое действие	primary
4	size	Размер кнопки: "sm", "md", "lg"	"md"
5	fullWidth	Растянуть кнопку во всю ширину родительского контейнера (boolean)	-
6	disabled	Настраивает состояние кнопки отключено. В этом состоянии пользователь не может взаимодействовать с кнопкой (boolean)	-
7	textProps	Свойства компонента Text (TextProps)

import { Button } from '@v-uik/button'

Заполненные кнопки (default)#

Данный тип кнопок имеет высокий акцент.

<Button>Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="error">Error</Button>

Контурные кнопки#

<Button kind="outlined">Primary</Button>
<Button kind="outlined" color="secondary">
  Secondary
</Button>
<Button kind="outlined" color="error">
  Error
</Button>

Текстовые кнопки#

<Button kind="ghost">Primary</Button>
<Button kind="ghost" color="secondary">
  Secondary
</Button>
<Button kind="ghost" color="error">
  Error
</Button>

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

  <Button style={{ minWidth: 40, padding: 7 }}>
    <Icon />
  </Button>
  <Button>
    <Icon style={{ marginRight: 8 }} />
    Text after icon
  </Button>
  <Button color="secondary">
    Text before icon
    <Icon style={{ marginLeft: 8 }} />
  </Button>

Кнопки разных размеров#

<Button size="sm">
  <Icon width={16} height={16} style={{ marginRight: 8 }} />
  Small
</Button>
<Button>
  <Icon style={{ marginRight: 8 }} />
  Medium (default)
</Button>
<Button size="lg">
  <Icon style={{ marginRight: 8 }} />
  Large
</Button>