@eisgs/toggle-button v3.0.0

Active

Передача значения true меняет внешний вид компонента. Изменять состояние можно с помощью параметра onClick

const [active, setActive] = React.useState(true);

const handleClick = () => setActive(!active);

<ToggleButton active={active} onClick={handleClick}>
  Текст
</ToggleButton>

Disabled

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

<ToggleButton disabled>
  Текст
</ToggleButton>

Loading (ЕИСЖС)

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

<ToggleButton loading>
  Текст
</ToggleButton>

Иконка (ИЖС)

При передаче Icon будет отображена иконка, положением которой можно управлять с помощью параметра iconAlign

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

<ToggleButton Icon={PrintIcon}>
  Текст
</ToggleButton>

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

const sizes = ['large', 'medium', 'small'];

<div style={{display: 'flex', marginBottom: 16}}>
  {sizes.map(size => <ToggleButton size={size} key={size} styles={{marginRight: 16}}>{size.toUpperCase()}</ToggleButton>)}
</div>