components

DropdownButton

DropdownButton is a split button with a primary action and a dropdown menu of additional options. Clicking the main area triggers the primary onClick, while clicking the trailing chevron opens a menu of MenuItem elements passed via the options prop. Use DropdownButton when there is a clear primary action (e.g. 'Save') alongside less common alternatives ('Save as Draft', 'Save and Close'). For a plain dropdown with no primary action, use DropdownMenu instead.

Import
import { DropdownButton } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

  • +Provide a primary action with additional related actions in a dropdown.
  • +Split buttons where the main action and secondary options are grouped.
  • +Compact action menus attached to a button trigger.

When not to use

  • −For a standalone menu without a button — use Menu.
  • −For navigation — use links or SideNavigation.
  • −For single actions — use a regular Button.

Examples

Code Samples

Save with Options

A primary Save action with dropdown alternatives for draft and template options.

import { DropdownButton, MenuItem } from "@skedulo/breeze-ui-react";

export default function SaveDropdown() {
  return (
    <DropdownButton
      onClick={() => console.log("Save")}
      options={
        <>
          <MenuItem value="draft">Save as Draft</MenuItem>
          <MenuItem value="template">Save as Template</MenuItem>
        </>
      }
    >
      Save
    </DropdownButton>
  );
}

Guidelines

Do

  • ✓Make the primary (left) action the most common choice.
  • ✓Keep dropdown options to 3-7 items.
  • ✓Use clear, action-oriented labels.

Don't

  • ✗Don't put destructive actions as the primary action.
  • ✗Don't use for form submissions.

API Reference

PropTypeDefaultDescription
options*ReactNode—MenuItem elements displayed in the dropdown menu.
onClick(e: ButtonEvent) => void—Fires when the main button area is clicked.
onMenuItemSelect(e: MenuItemSelectEvent) => void—Fires when a menu item in the dropdown is selected.
menuSize"small" | "medium" | "large""medium"Size of the dropdown menu panel.
tooltipTextstring—Tooltip shown on hover over the dropdown chevron.

Related Components

ButtonMenuDropdown Menu