Hesoyam

Split Button

One primary action plus a menu of close variants. The first menu item must match the visible label.

Sizes and variants

Hesoyam sizes are small, medium, large. Variants are default and secondary. sm / lg still map through.

Last action: —


        

          1
          
          <SplitButton
        

          2
          
            menu-button-label="Select save method"
        

          3
          
            :button-props="{ size: 'small', variant: 'default', onClick: () => run('Save') }"
        

          4
          
            :menu-props="{ width: 264 }"
        

          5
          
          >
        

          6
          
            Save
        

          7
          
            <template #menuItems>
        

          8
          
              <SplitButtonMenuItem
        

          9
          
                title="Save"
        

          10
          
                description="Save changes"
        

          11
          
                :menu-item-props="{ onClick: () => run('Save') }"
        

          12
          
              />
        

          13
          
              <SplitButtonMenuItem
        

          14
          
                title="Save + Redeploy"
        

          15
          
                description="Save changes and create a new production deployment"
        

          16
          
                :menu-item-props="{ onClick: () => run('Save + Redeploy') }"
        

          17
          
              />
        

          18
          
            </template>
        

          19
          
          </SplitButton>

Menu alignment

bottom-start (default) lines up under the primary. bottom-end when the control sits on the right edge.


        

          1
          
          <SplitButton
        

          2
          
            menu-button-label="Select save method"
        

          3
          
            menu-alignment="bottom-start"
        

          4
          
            :menu-props="{ width: 264 }"
        

          5
          
          >
        

          6
          
            Save
        

          7
          
          </SplitButton>
        

          8
          
          <SplitButton
        

          9
          
            menu-button-label="Select save method"
        

          10
          
            menu-alignment="bottom-end"
        

          11
          
            :menu-props="{ width: 264 }"
        

          12
          
          >
        

          13
          
            Save
        

          14
          
          </SplitButton>

Icon

Slot an icon on each menu item. Keep the glyph at 16px.


        

          1
          
          <SplitButton
        

          2
          
            menu-button-label="Copy page"
        

          3
          
            :button-props="{ size: 'small', variant: 'secondary' }"
        

          4
          
            :menu-props="{ width: 240 }"
        

          5
          
          >
        

          6
          
            Copy page
        

          7
          
            <template #menuItems>
        

          8
          
              <SplitButtonMenuItem
        

          9
          
                title="Open in v0"
        

          10
          
                description="Open this page in v0"
        

          11
          
              >
        

          12
          
                <template #icon>
        

          13
          
                  <Icon :icon="SparklesIcon" :size="16" />
        

          14
          
                </template>
        

          15
          
              </SplitButtonMenuItem>
        

          16
          
            </template>
        

          17
          
          </SplitButton>

Title with icon

The title slot can hold a glyph plus the verb. Description stays plain text.


        

          1
          
          <SplitButtonMenuItem description="Save changes">
        

          2
          
            <template #title>
        

          3
          
              <span class="flex items-center gap-2">
        

          4
          
                <Icon :icon="FloppyDiskIcon" :size="14" />
        

          5
          
                Save
        

          6
          
              </span>
        

          7
          
            </template>
        

          8
          
          </SplitButtonMenuItem>

Disabled


        

          1
          
          <SplitButton
        

          2
          
            menu-button-label="Select save method"
        

          3
          
            :button-props="{ disabled: true }"
        

          4
          
          >
        

          5
          
            Save
        

          6
          
          </SplitButton>

Best practices

  • Use a Split Button when one action is the default and 1–4 close variants sit next to it. Unrelated actions belong in a Menu.
  • Repeat the primary action as the first menu item. The visible label and that title must match exactly.
  • Stay on default or secondary. Destructive work does not hide behind the chevron. secondary maps to the button outline alias internally.
  • Title Case every item. Verb + noun: Deploy to Production, Promote to Production. Put danger at the bottom.
  • menu-button-label is required. It becomes the chevron's aria-label — the only name a screen reader hears for that button. Write a sentence: More deploy options.
  • Prefer the #menuItems slot. The menu-items prop accepts VNodes when a parent builds the list in script.