Split ButtonSplit Button

주 동작과 보조 메뉴 캐럿을 한 알약에 담은 버튼입니다.A pill button that pairs a primary action with a caret for a secondary menu.

@horon-ai/react 입력과 선택Inputs and selection

tsx

import { MenuItem, MenuSeparator, SplitButton } from "@horon-ai/react";
import { Plus } from "@phosphor-icons/react";

const menu = (
  <>
    <MenuItem>Add from template</MenuItem>
    <MenuItem>Import from file</MenuItem>
    <MenuSeparator />
    <MenuItem>Add manually</MenuItem>
  </>
);

export default function SplitButtonDemo() {
  return (
    <>
      <SplitButton icon={<Plus />} menu={menu}>
        Add
      </SplitButton>
      {/* Without a menu there is no caret half: the pill is one button. */}
      <SplitButton icon={<Plus />}>Deploy</SplitButton>
      <SplitButton disabled icon={<Plus />} menu={menu}>
        Disabled
      </SplitButton>
    </>
  );
}