Componentdata0.73 KB gzipZero dependencies

Export Menu

Format dropdown with stamp frame.

Preview

Live Preview

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add export-menu

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { ExportMenu } from "@/components/ui/export-menu";

<ExportMenu />

Usage guidance

Use Export Menu when a ticket stub surface needs Format dropdown with stamp frame. Keep props minimal and prefer composition with sibling stubs.

Avoid Export Menu for long form flows or dense data grids where a dedicated layout block fits better.

Source code

export-menu.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface ExportMenuProps extends React.HTMLAttributes<HTMLDivElement> {
  onExport?: (format: string) => void;
}

/** Export menu stub: dashed dropdown of file formats. */
export function ExportMenu({ onExport, className, ...props }: ExportMenuProps) {
  const [open, setOpen] = React.useState(false);
  const formats = ["CSV", "PDF", "JSON", "Print"];
  return (
    <div className={cn("relative inline-block", className)} {...props}>
      <button
        type="button"
        aria-expanded={open}
        aria-haspopup="menu"
        onClick={() => setOpen((v) => !v)}
        className="rounded-md border border-border bg-card px-3 py-1.5 font-mono text-[11px] font-bold uppercase tracking-wider text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
      >
        Export ▾
      </button>
      {open && (
        <div role="menu" className="absolute right-0 z-10 mt-1 w-36 rounded-md border border-border bg-card p-1 shadow-md outline-1 outline-dashed outline-offset-[-4px] outline-border/60">
          {formats.map((f) => (
            <button
              key={f}
              type="button"
              role="menuitem"
              onClick={() => { onExport?.(f); setOpen(false); }}
              className="w-full rounded px-2 py-1.5 text-left font-mono text-[11px] uppercase text-foreground hover:bg-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            >
              {f}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}