@snack-uikit/button-combo

Button Combo

Installation

npm i @snack-uikit/button-combo

Changelog

Description

• Пакет @snack-uikit/button-combo предоставляет комбинированную кнопку ButtonCombo с основным действием и выпадающим списком дополнительных операций.
• Компонент собирает из массива элементов items две связанные части: основную кнопку, запускающую выбранное действие, и триггер раскрытия дроплиста со списком остальных действий.
• Поддерживает как неконтролируемый (defaultValue, defaultLabel), так и контролируемый (value, onChange, open, onOpenChange) режимы работы, а также общий набор состояний (size, disabled, loading, fullWidth, tabIndex).
• Каждый пункт списка задаётся через items с обязательным onClick, поэтому после выбора опции меняется и лейбл основной кнопки, и вызывается соответствующее действие.
• Figma: ButtonCombo.

Example

import { ButtonCombo } from '@snack-uikit/button-combo';

const items = [
  {
    id: 'create',
    label: 'Создать',
    onClick: () => {
      console.log('Создать');
    },
  },
  {
    id: 'duplicate',
    label: 'Дублировать',
    onClick: () => {
      console.log('Дублировать');
    },
  },
];

export function ButtonComboExample() {
  return (
    <ButtonCombo
      items={items}
      defaultValue='create'
      defaultLabel='Создать'
      size='s'
      fullWidth={false}
    />
  );
}

ButtonCombo

Props

name	type	default value	description
items*	Item[]	-	Основные элементы списка
className	string	-	CSS-класс
disabled	boolean	-	Флаг неактивности компонента
loading	boolean	-	Флаг состояния загрузки
size	enum Size: "xs", "s", "m", "l"	s	Размер
tabIndex	number	-	HTML-аттрибут tab-index
fullWidth	boolean	-	Сделать кнопку во всю ширину
open	boolean	-	Управляет состоянием показан/не показан.
onOpenChange	(isOpen: boolean) => void	-	Колбек отображения компонента. Срабатывает при изменении состояния open.
dropdownClassName	string	-	CSS-класс Dropdown
optionClassName	string	-	CSS-класс Option кнопки
dropdownTriggerClassName	string	-	CSS-класс Dropdown trigger кнопки
value	ItemId	-	Controlled состояние
onChange	(value: ItemId) => void	-	Controlled обработчик измения состояния
defaultValue	string	-	Начальное состояние
defaultLabel	string	-	Начальное состояние лейбла
ref	LegacyRef<HTMLDivElement>	-	Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
key	Key	-