Split button

Playground

'use client';
import {
  SplitButton,
  SplitButtonAction,
  SplitButtonMenuTrigger,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@mbsw/ui';
import { ChevronDown, Plus, ArrowRight } from 'lucide-react';

export default function Demo() {
  const settings = {
    "leadingIcon": false,
    "trailingIcon": false,
    "label": "Text",
    "disabled": false
  };
  const items = ['contents 1', 'contents 2'];
  return (
    <SplitButton disabled={settings.disabled}>
      <SplitButtonAction
        leadingIcon={settings.leadingIcon ? Plus : undefined}
        trailingIcon={settings.trailingIcon ? ArrowRight : undefined}
      >
        {settings.label}
      </SplitButtonAction>
      <DropdownMenu>
        <SplitButtonMenuTrigger
          aria-label={"Open options"}
          icon={ChevronDown}
        />
        <DropdownMenuContent align="end" style={{ width: 180 }}>
          {items.map((label, index) => (
            <DropdownMenuItem key={index}>{label}</DropdownMenuItem>
          ))}
        </DropdownMenuContent>
      </DropdownMenu>
    </SplitButton>
  );
}

Properties

Leading icon

Trailing icon

Disabled

Content

Label

Usage

Group a primary action with DropdownMenu. Place DropdownMenu after SplitButtonAction.

'use client';
import {
  SplitButton,
  SplitButtonAction,
  SplitButtonMenuTrigger,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
} from '@mbsw/ui';
import { ChevronDown } from 'lucide-react';

export default function Example({
  onAdd,
  onAddFromTemplate,
}: {
  onAdd: () => void;
  onAddFromTemplate: () => void;
}) {
  return (
    <SplitButton>
      <SplitButtonAction onClick={onAdd}>{"Text"}</SplitButtonAction>
      <DropdownMenu>
        <SplitButtonMenuTrigger
          aria-label={"Open options"}
          icon={ChevronDown}
        />
        <DropdownMenuContent>
          <DropdownMenuItem onSelect={onAddFromTemplate}>
            contents 1
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </SplitButton>
  );
}

The Playground Code tab includes the full example with your current settings. See Installation for the CSS imports.

Composition

SplitButtonSplitButtonActionSplitButtonMenuTrigger