Split Button

import { DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, SplitButton, toast } from 'ferry-ui'
import { CalendarClock, Download, FileSpreadsheet, FileText } from 'lucide-react'

export default function SplitButtonHero() {
  return (
    <SplitButton
      icon={<Download />}
      onClick={() => toast.success('CSV export started')}
      menuLabel="More export options"
      menu={
        <>
          <DropdownMenuLabel>Export as</DropdownMenuLabel>
          <DropdownMenuItem onSelect={() => toast.success('Excel export started')}>
            <FileSpreadsheet /> Excel (.xlsx)
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={() => toast.success('PDF export started')}>
            <FileText /> PDF
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem onSelect={() => toast('Schedule an export')}>
            <CalendarClock /> Schedule an export…
          </DropdownMenuItem>
        </>
      }
    >
      Export CSV
    </SplitButton>
  )
}

import { DropdownMenuItem, SplitButton } from 'ferry-ui'

const VARIANTS = [
  { variant: 'default', label: 'Default' },
  { variant: 'primary', label: 'Primary' },
  { variant: 'outline', label: 'Outline' },
  { variant: 'destructive', label: 'Destructive' },
  { variant: 'warning', label: 'Warning' },
] as const

export default function SplitButtonVariants() {
  return (
    <>
      {VARIANTS.map(({ variant, label }) => (
        <SplitButton
          key={variant}
          variant={variant}
          menuLabel={`More actions, ${variant}`}
          menu={
            <>
              <DropdownMenuItem>First alternative</DropdownMenuItem>
              <DropdownMenuItem>Second alternative</DropdownMenuItem>
            </>
          }
        >
          {label}
        </SplitButton>
      ))}
    </>
  )
}

import { DropdownMenuItem, SplitButton } from 'ferry-ui'

const SIZES = [
  { size: 'tiny', label: 'Tiny' },
  { size: 'sm', label: 'Small' },
  { size: 'md', label: 'Medium' },
  { size: 'lg', label: 'Large' },
] as const

export default function SplitButtonSizes() {
  return (
    <>
      {SIZES.map(({ size, label }) => (
        <SplitButton
          key={size}
          size={size}
          menuLabel={`More actions, ${size}`}
          menu={
            <>
              <DropdownMenuItem>First alternative</DropdownMenuItem>
              <DropdownMenuItem>Second alternative</DropdownMenuItem>
            </>
          }
        >
          {label}
        </SplitButton>
      ))}
    </>
  )
}

import * as React from 'react'
import { DropdownMenuItem, SplitButton, toast } from 'ferry-ui'
import { CalendarClock, Save, Send } from 'lucide-react'

export default function SplitButtonLoading() {
  const [publishing, setPublishing] = React.useState(false)

  function publish() {
    setPublishing(true)
    // Stands for a request to the server.
    window.setTimeout(() => {
      setPublishing(false)
      toast.success('Page published')
    }, 1500)
  }

  return (
    <SplitButton
      variant="primary"
      icon={<Send />}
      loading={publishing}
      onClick={publish}
      menuLabel="More publish options"
      menu={
        <>
          <DropdownMenuItem onSelect={() => toast('Schedule the page')}>
            <CalendarClock /> Schedule for later…
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={() => toast.success('Draft saved')}>
            <Save /> Save as draft
          </DropdownMenuItem>
        </>
      }
    >
      {publishing ? 'Publishing…' : 'Publish'}
    </SplitButton>
  )
}

import { DropdownMenuItem, SplitButton, toast } from 'ferry-ui'
import { Download, Link2, Mail } from 'lucide-react'

export default function SplitButtonMenuAvailable() {
  return (
    <>
      <p id="send-invoice-reason" className="text-[13px] text-foreground-light">
        Add a billing email to send this invoice.
      </p>
      <SplitButton
        icon={<Mail />}
        disabled
        // The main action is not available, but its alternatives are.
        menuDisabled={false}
        menuLabel="More invoice actions"
        actionProps={{ 'aria-describedby': 'send-invoice-reason' }}
        menu={
          <>
            <DropdownMenuItem onSelect={() => toast.success('PDF download started')}>
              <Download /> Download PDF
            </DropdownMenuItem>
            <DropdownMenuItem onSelect={() => toast.success('Payment link copied')}>
              <Link2 /> Copy payment link
            </DropdownMenuItem>
          </>
        }
      >
        Send invoice
      </SplitButton>
    </>
  )
}

import * as React from 'react'
import { Button, DropdownMenuItem, SplitButton, toast } from 'ferry-ui'

export default function SplitButtonControlled() {
  const [open, setOpen] = React.useState(false)

  return (
    <>
      <Button variant="ghost" onClick={() => setOpen(true)}>
        Show the other formats
      </Button>
      <SplitButton
        open={open}
        // Always update the state here, or the menu cannot close.
        onOpenChange={setOpen}
        onClick={() => toast.success('CSV export started')}
        menuLabel="More export options"
        menu={
          <>
            <DropdownMenuItem onSelect={() => toast.success('Excel export started')}>Excel (.xlsx)</DropdownMenuItem>
            <DropdownMenuItem onSelect={() => toast.success('PDF export started')}>PDF</DropdownMenuItem>
          </>
        }
      >
        Export CSV
      </SplitButton>
    </>
  )
}

import { Button, DropdownMenuItem, Field, Input, SplitButton, toast } from 'ferry-ui'
import { CalendarClock, Save } from 'lucide-react'

export default function SplitButtonSubmit() {
  return (
    <form
      className="mx-auto flex w-full max-w-sm flex-col gap-4"
      onSubmit={(event) => {
        event.preventDefault()
        toast.success('Page published')
      }}
    >
      <Field label="Title">
        <Input defaultValue="Release notes for March" />
      </Field>
      <div className="flex items-center justify-end gap-2">
        <Button type="reset">Cancel</Button>
        {/* Enter in the field submits the form: it runs the main action. */}
        <SplitButton
          type="submit"
          variant="primary"
          menuLabel="More publish options"
          menu={
            <>
              <DropdownMenuItem onSelect={() => toast('Schedule the page')}>
                <CalendarClock /> Schedule for later…
              </DropdownMenuItem>
              <DropdownMenuItem onSelect={() => toast.success('Draft saved')}>
                <Save /> Save as draft
              </DropdownMenuItem>
            </>
          }
        >
          Publish
        </SplitButton>
      </div>
    </form>
  )
}

import * as React from 'react'
import { ConfirmDialog, DropdownMenuItem, DropdownMenuSeparator, SplitButton, toast } from 'ferry-ui'
import { Ban, RefreshCw } from 'lucide-react'

export default function SplitButtonDestructive() {
  const [open, setOpen] = React.useState(false)
  const [all, setAll] = React.useState(false)

  function ask(allKeys: boolean) {
    setAll(allKeys)
    setOpen(true)
  }

  return (
    <>
      <SplitButton
        variant="destructive"
        onClick={() => ask(false)}
        menuLabel="More revoke options"
        menuProps={{ className: 'w-64' }}
        menu={
          <>
            <DropdownMenuItem onSelect={() => toast.success('Key replaced')}>
              <RefreshCw /> Revoke and create a replacement
            </DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem variant="destructive" onSelect={() => ask(true)}>
              <Ban /> Revoke all API keys…
            </DropdownMenuItem>
          </>
        }
      >
        Revoke key
      </SplitButton>
      <ConfirmDialog
        open={open}
        onOpenChange={setOpen}
        title={all ? 'Revoke all API keys?' : 'Revoke API key “Analytics export”?'}
        description="Requests that use a revoked key start to fail immediately. You cannot undo this."
        confirmLabel={all ? 'Revoke all keys' : 'Revoke key'}
        onConfirm={() => {
          toast.success(all ? 'All API keys revoked' : 'API key revoked')
        }}
      />
    </>
  )
}