MenuButton component · Kition Tessera

Examples

Edit menu

menu-button.tsx

import { useState } from 'react'
import { Button, MenuButton, MenuItem, MenuSeparator, toast } from '@kition/tessera-ui'
import { ClipboardPasteIcon, CopyIcon, ScissorsIcon } from '@kition/tessera-icons/react'

export default function Demo() {
  const [snap, setSnap] = useState(true)
  return (
    <MenuButton trigger={({ toggle }) => <Button onClick={toggle}>Edit ▾</Button>}>
      <MenuItem icon={ScissorsIcon} label="Cut" shortcut="⌘X" onSelect={() => toast('info', 'Cut')} />
      <MenuItem icon={CopyIcon} label="Copy" shortcut="⌘C" onSelect={() => toast('info', 'Copy')} />
      <MenuItem icon={ClipboardPasteIcon} label="Paste" shortcut="⌘V" onSelect={() => toast('info', 'Paste')} />
      <MenuSeparator />
      <MenuItem label="Snap to grid" checked={snap} onSelect={() => setSnap(!snap)} />
    </MenuButton>
  )
}

Props

MenuButton

A button that opens a menu below it; the menu takes the focus, and gives it back to the button when it closes. With placement auto (a button along a panel's bottom), the menu opens above the button when it does not fit below and there is more room above.

Prop	Type	Default
`trigger`required	`(props: { open: boolean; toggle: () => void }) => ReactNode`	—
`children`required	`ReactNode`	—
`align`	`'start' \| 'end'`	`'start'`
`placement`	`'below' \| 'auto'`	`'below'`

MenuItem

A menu row. With checked set (true or false) it is a toggle: a check mark shows in the icon's place while it is on (the state wins over the icon), and assistive technology hears it as a checkbox item.

Prop	Type	Default
`icon`	`IconComponent`	—
`label`required	`string`	—
`shortcut`	`string \| null`	—
`onSelect`required	`() => void`	—
`disabled`	`boolean`	—
`checked`	`boolean`	—
`testId`	`string`	—
`uiId`	`string`	—

MenuSeparator

No props.

Used in

11 of Kition's 16 kits use these components.

Cad
Cube
Design
Doc
Effect
Film
Note
Photo
Sheet
Slide
Vector