SplitButton
Actions

SplitButton

A button with a caret dropdown on its right edge, for the classic "Export CSV" ▾ pattern.

Props

SplitButton combines a primary Button with a caret dropdown. The main onClick fires the primary action; menu provides the alternate options via an internal DropdownMenu.

SplitButtonProps props
PropTypeDefaultDescription
childrenReactNode—Main button label.
menuReactNode—MenuItem components for the dropdown.
onClick() => void—Primary (left half) action.
variantButtonVariant"default"Applies to both halves.
sizeButtonSize"md""sm" | "md"
leftIconReactNode—Icon before the main label.
disabledboolean—Disables both halves.
placementPlacement"bottom-end"Dropdown placement relative to the trigger.

Examples

SplitButton
ImportTSX
import { SplitButton, MenuItem } from "@solarius/onset";
import { IconDownload } from "@tabler/icons-react";

<SplitButton
  onClick={() => exportCSV()}
  leftIcon={<IconDownload size={14} />}
  menu={
    <>
      <MenuItem onClick={() => exportJSON()}>Export JSON</MenuItem>
      <MenuItem onClick={() => exportPDF()}>Export PDF</MenuItem>
    </>
  }
>
  Export CSV
</SplitButton>;