A ComboButton displays a "default" action that discloses a list of additional, related actions to choose from in a dropdown menu.

ComboButtons reduce visual complexity by grouping similar commands together. For example, how navigation menus group together related options to enable conceptual understanding of the site information structure.

import { ComboButton } from "@vitality-ds/components";

<ComboButton
  mainButtonProps={{ children: "Save & Invoice", appearance: "primary" }}
  items={[{ label: "Save" }, { label: "Invoice" }]}
/>

1. Default Action: Typically the most commonly used action there is to take.
2. Dropdown Button: Used to reveal the dropdown menu containing additional actions.
3. Additional Actions: DropdownMenu that provides additional, related actions.

<ComboButton
  mainButtonProps={{ children: "Print Invoice", appearance: "primary" }}
  items={[
    { label: "Lodgement Advice" },
    { label: "Payment Summary for 18/12/1985 - $15.00" },
  ]}
/>

Avoid using extra icons inside of the default, primary button to reduce visual noise. Keep button labels clear and concise. Use of icons within dropdown menu items should follow the guidelines on the DropdownMenu documentation.

Depending on the context in which the ComboButton appears, you can choose any button variant.

<Stack spacing="xl">
  <Typography variant="sectionTitle">
    Use with a different primary action
  </Typography>
  <Stack direction="horizontal">
    <ComboButton
      mainButtonProps={{ children: "Print Invoice" }}
      items={[
        { label: "Lodgement Advice" },
        { label: "Payment Summary for 18/12/1985 - $15.00" },
      ]}
    />
    <Button appearance="primary">Save</Button>
  </Stack>
  <Typography variant="sectionTitle">Destructive action</Typography>
  <Stack direction="horizontal">
    <Button>Cancel</Button>
    <ComboButton
      mainButtonProps={{ children: "Delete Record", appearance: "destructive" }}
      items={[{ label: "Archive only" }, { label: "Revert changes" }]}
    />
  </Stack>
</Stack>

ComboButton can be displayed in a compact mode – similar to buttons.

<ComboButton
  size="compact"
  mainButtonProps={{ children: "Save & Invoice", appearance: "primary" }}
  items={[{ label: "Save" }, { label: "Invoice" }]}
/>