@eisgs/button

Типы (ЕИСЖС)

import { PrintIcon } from '@eisgs/icon';

const types = ['primary', 'secondary', 'destructive', 'textButton', 'icon'];

const styles = {
  marginBottom: 16
};

types.map(type => (
  <Button 
    {...type.includes('icon') && {Icon: PrintIcon}}
    key={type}
    type={type}
    styles={styles}
  >
    {type}
  </Button>
))

Типы (ИЖС)

import { PrintIcon } from '@eisgs/icon';

const types = ['primary', 'secondary', 'ordinary', 'destructive', 'textButton', 'iconPrimary', 'iconSecondary', 'iconOrdinary', 'floating'];

const styles = {
  marginBottom: 16
};

types.map(type => (
  <Button 
    {...type.includes('icon') && {Icon: PrintIcon}}
    key={type}
    styles={styles}
    type={type}
  >
    {type}
  </Button>
))

Цвет (ЕИСЖС)

Кастомный цвет кнопке можно задавать в параметре color.

<Button type="primary" color="red">
  Primary
</Button>

Кнопка с иконкой (ЕИСЖС)

Иконка передается как компонент Icon. Дополнительно можно передать параметры iconSize, iconColor.

По умолчанию иконка располагается слева от текста внутри кнопки. Управлять положением иконки можно с помощью параметра iconAlign.

import { EditIcon } from '@eisgs/icon';

const types = ['primary', 'secondary', 'destructive', 'textButton'];

const styles = {
  marginBottom: 16
};

types.map(type => (
  <Button
    key={type}
    type={type}
    Icon={EditIcon}
    styles={styles}
  >
    {type}
  </Button>
))

Кнопка с иконкой (ИЖС)

Иконка передается как компонент Icon. Дополнительно можно передать iconColor.

По умолчанию иконка располагается слева от текста внутри кнопки. Управлять положением иконки можно с помощью параметра iconAlign.

import { EditIcon } from '@eisgs/icon';

const types = ['primary', 'secondary', 'ordinary', 'destructive', 'textButton', 'iconPrimary', 'iconSecondary', 'iconOrdinary'];

const styles = {
  marginBottom: 16
};

types.map(type => (
  <Button
    key={type}
    type={type}
    Icon={EditIcon}
    styles={styles}
  >
    {type}
  </Button>
))

Disabled (ЕИСЖС)

При передаче флага disabled кнопка будет заблокирована.

import { PrintIcon } from '@eisgs/icon';

const types = ['primary', 'secondary', 'destructive', 'textButton', 'icon'];

const styles = {
  marginBottom: 16
};

types.map(type => (
  <Button
    {...type.includes('icon') && {Icon: PrintIcon}}
    key={type}
    styles={styles}
    type={type}
    disabled
  >
    {type}
  </Button>
))

Disabled (ИЖС)

При передаче флага disabled кнопка будет заблокирована.

import { PrintIcon } from '@eisgs/icon';

const types = ['primary', 'secondary', 'ordinary', 'destructive', 'textButton', 'iconPrimary', 'iconSecondary', 'iconOrdinary', 'floating'];

const styles = {
  marginBottom: 16
};

types.map(type => (
  <Button
    {...type.includes('icon') && {Icon: PrintIcon}}
    key={type}
    styles={styles}
    type={type}
    disabled
  >
    {type}
  </Button>
))

Loading (ЕИСЖС)

Состояние loading добавляет лоадер поверх кнопки. Текст в данном состоянии скрывается.

import { PrintIcon } from '@eisgs/icon';

const types = ['primary', 'secondary', 'destructive', 'textButton', 'icon'];

const styles = {
  marginBottom: 16
};

types.map(type => (
  <Button
    {...type.includes('icon') && {Icon: PrintIcon}}
    key={type}
    styles={styles}
    type={type}
    loading
  >
    {type}
  </Button>
))

Поведение в форме

Для того чтобы задать у кнопки type="submit", необходимо передать флаг isSubmit.

const handleSubmit = (e) => {
  e.preventDefault();

  alert('Submit');
};

<form onSubmit={handleSubmit}>
  <Button isSubmit type="primary">
    Отправить
  </Button>
</form>

Размеры (ИЖС)

Все типы, кроме textButton и floating имеют 3 размера - small, medium, large. Значение по умолчанию medium.

import { PrintIcon } from '@eisgs/icon';

const sizes = ['large', 'medium', 'small'];
const twoSizesTypes = ['textButton', 'floating'];
const types = ['primary', 'secondary', 'ordinary', 'destructive', 'iconPrimary', 'iconSecondary', 'iconOrdinary', ...twoSizesTypes];

const styles = {
  display: 'flex',
  marginBottom: 16
};

const buttonStyles = {
  marginRight: 16
};

types.map(type => (
  <div style={styles} key={type}>
    {(twoSizesTypes.includes(type) ? sizes.slice(0, 2) : sizes).map(size => (
      <Button
        {...type.includes('icon') && {Icon: PrintIcon}}
        styles={{marginRight: 16}}
        key={`${type}-${size}`}
        type={type}
        size={size}
      >
        {type}
      </Button>
    ))}
  </div>
))

Счетчик (ИЖС)

Типы iconPrimary, iconSecondary, iconOrdinary поддерживают отображение счетчика. При передаче значения больше 100, счетчик отображается со значением 99+.

import { PrintIcon } from '@eisgs/icon';

const types = ['iconPrimary', 'iconSecondary', 'iconOrdinary'];

const styles = {
  marginBottom: 16
};

types.map((type, index) => (
  <Button
    key={type}
    styles={styles}
    Icon={PrintIcon}
    type={type}
    count={Math.pow(10, index)}
  >
    {type}
  </Button>
))

Selected (ИЖС)

Для типа textButton можно указать параметр selected.

const [isSelected, setIsSelected] = React.useState(true);

<Button type="textButton" selected={isSelected} onClick={() => setIsSelected(prev => !prev)}>{isSelected ? 'Selected' : 'Default'}</Button>