# V button 29

> Split button with primary action and dropdown menu via Group

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-button-29).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-button-29
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-button-29-light-7f2a2bdd952e562b.png
- Registry item: https://ui.cnippet.dev/r/v-button-29.json
- Categories: button
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-button-29.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/button`

## Files

### `registry/default/variants/v-button-29.tsx`

```tsx
import { ChevronDownIcon, RocketIcon } from "lucide-react";
import { Button } from "@/registry/default/ui/button";
import { Group, GroupSeparator } from "@/registry/default/ui/group";
import {
  Menu,
  MenuItem,
  MenuPopup,
  MenuTrigger,
} from "@/registry/default/ui/menu";

export function Pattern() {
  return (
    <Group aria-label="Deploy options">
      <Button>
        <RocketIcon className="size-4" />
        Deploy
      </Button>
      <GroupSeparator />
      <Menu>
        <MenuTrigger
          render={
            <Button
              aria-label="More deploy options"
              className="px-2 py-3.75"
              size="icon-sm"
            />
          }
        >
          <ChevronDownIcon className="size-5" />
        </MenuTrigger>
        <MenuPopup align="end">
          <MenuItem>Deploy to Staging</MenuItem>
          <MenuItem>Deploy to Preview</MenuItem>
          <MenuItem>Deploy with custom env</MenuItem>
          <MenuItem variant="destructive">Force deploy</MenuItem>
        </MenuPopup>
      </Menu>
    </Group>
  );
}
```