Package Exports

@commercetools-uikit/primary-action-dropdown
@commercetools-uikit/primary-action-dropdown/dist/commercetools-uikit-primary-action-dropdown.cjs.js
@commercetools-uikit/primary-action-dropdown/dist/commercetools-uikit-primary-action-dropdown.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@commercetools-uikit/primary-action-dropdown) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PrimaryActionDropdown

Description

A PrimaryActionDropdown is a dropdown with any number of action whereas the first action of the dropdown can be triggered without opening the dropdown itself.

The primary action, rendered as the head of the dropdown, is always the first non-disabled <Option />. If all <Option />s are disabled, the head of the dropdown will be disabled.

Installation

yarn add @commercetools-uikit/primary-action-dropdown

npm --save install @commercetools-uikit/primary-action-dropdown

Additionally install the peer dependencies (if not present)

yarn add react

npm --save install react

Usage

import PrimaryActionDropdown, {
  Option,
} from '@commercetools-uikit/primary-action-dropdown';
import { PlusBoldIcon } from '@commercetools-uikit/icons';

const Example = () => (
  <PrimaryActionDropdown>
    <Option iconLeft={<PlusBoldIcon />} onClick={() => {}}>
      Primary option
    </Option>
    <Option onClick={() => {}}>Another option</Option>
    <Option isDisabled={true} onClick={() => {}}>
      Even another option
    </Option>
  </PrimaryActionDropdown>
);

export default Example;