Lucent UI
← ButtonSplitButtonButtonGroup →
✦ LLM-ready

SplitButton

atom

Compound button pairing a primary action with a chevron dropdown for secondary actions. Each half is an independent button with its own hover lift and press ring. Composes the Menu molecule for dropdown keyboard navigation, positioning, and portal rendering. Supports all 7 variants and 5 sizes.

"Add a SplitButton from lucent-ui with a primary save action and dropdown menu items for 'Save as draft' and 'Save & publish'."

Usage

React / JSX
import { SplitButton } from 'lucent-ui'

<SplitButton variant="primary" size="md"
  menuItems={[
    { label: "Save as draft", onSelect: () => {} },
    { label: "Save & publish", onSelect: () => {} },
  ]}
>
  Save
</SplitButton>

Installation

pnpm add lucent-ui

API Reference

SplitButton props — * required

PropTypeDefaultDescription
variant"primary" | "secondary" | "outline" | "ghost" | "danger" | "danger-outline" | "danger-ghost""primary"Visual style of both button halves.
size"2xs" | "xs" | "sm" | "md" | "lg""md"Height and padding scale.
onClick() => void—Callback for the primary (left) button click.
menuItems*Array<{ label: string; onSelect: () => void; disabled?: boolean; danger?: boolean; icon?: ReactNode }>—Items shown in the dropdown menu.
leftIconReactNode—Icon displayed before the primary label.
disabledbooleanfalseDisables both halves.
loadingbooleanfalseShows spinner on primary half and disables interaction.
borderedbooleantrueAdds visible border around the split button.
menuPlacement"bottom-start" | "bottom-end" | "top-start" | "top-end""bottom-end"Preferred dropdown placement.
children*React.ReactNode—Primary button label.