YA Tooltip Actions Menu

The YaTooltipActionsMenu component provides a floating toolbar for quick actions. It supports two display modes: icons-only for compact interfaces, and icons with labels for clearer actions.

Quick Start

pnpm dlx shadcn@latest add @yavendio/ya-tooltip-actions-menu

npx shadcn@latest add @yavendio/ya-tooltip-actions-menu

yarn dlx shadcn@latest add @yavendio/ya-tooltip-actions-menu

import { 
  YaTooltipActionsMenu, 
  YaTooltipActionItem 
} from '@/components/ui/ya-tooltip-actions-menu'
import { Check, Share2 } from 'lucide-react'

export default function Example() {
  return (
    <YaTooltipActionsMenu type="icons">
      <YaTooltipActionItem icon={<Check />} onClick={() => {}} />
      <YaTooltipActionItem icon={<Share2 />} onClick={() => {}} />
    </YaTooltipActionsMenu>
  )
}

Basic Usage

Display Types

YaTooltipActionsMenu supports two display modes:

Icons Only

Icons with Labels

Icons Only

Compact mode showing only icons. Best for space-constrained UIs.

Characteristic	Value
Action size	24x24px
Gap between items	4px
Hover state	Opacity transition

<YaTooltipActionsMenu type="icons">
  <YaTooltipActionItem icon={<Check />} active onClick={() => {}} />
  <YaTooltipActionItem icon={<Share2 />} onClick={() => {}} />
  <YaTooltipActionItem icon={<Copy />} onClick={() => {}} />
  <YaTooltipActionItem icon={<Bookmark />} onClick={() => {}} />
</YaTooltipActionsMenu>

Icons with Labels

Expanded mode showing icons with text labels.

Characteristic	Value
Width	Auto based on label
Gap between items	8px
Label shows	Icon purpose

<YaTooltipActionsMenu type="labels">
  <YaTooltipActionItem icon={<Check />} label="Verify" active onClick={() => {}} />
  <YaTooltipActionItem icon={<Share2 />} label="Share" onClick={() => {}} />
  <YaTooltipActionItem icon={<Copy />} label="Copy" onClick={() => {}} />
  <YaTooltipActionItem icon={<Bookmark />} label="Save" onClick={() => {}} />
</YaTooltipActionsMenu>

Active State

Highlight the currently active action:

Active Item (Icons)

Active Item (Labels)

State	Background	Icon/Label Color
`active={true}`	`bg-secondary`	`text-primary`
`active={false}`	Transparent	`--ya-stone-500` / `--ya-stone-800`

<YaTooltipActionsMenu type="icons">
  <YaTooltipActionItem 
    icon={<Check />} 
    active={true}  // Shows with secondary background
    onClick={() => {}} 
  />
  <YaTooltipActionItem 
    icon={<Share2 />} 
    active={false}  // Default transparent background
    onClick={() => {}} 
  />
</YaTooltipActionsMenu>

Examples

import { Bold, Italic, Underline, Link } from 'lucide-react'

const [activeFormat, setActiveFormat] = useState<string | null>('bold')

<YaTooltipActionsMenu type="icons">
  <YaTooltipActionItem 
    icon={<Bold />} 
    active={activeFormat === 'bold'} 
    onClick={() => setActiveFormat('bold')} 
  />
  <YaTooltipActionItem 
    icon={<Italic />} 
    active={activeFormat === 'italic'} 
    onClick={() => setActiveFormat('italic')} 
  />
  <YaTooltipActionItem 
    icon={<Underline />} 
    active={activeFormat === 'underline'} 
    onClick={() => setActiveFormat('underline')} 
  />
  <YaTooltipActionItem 
    icon={<Link />} 
    active={activeFormat === 'link'} 
    onClick={() => setActiveFormat('link')} 
  />
</YaTooltipActionsMenu>

Content Actions

import { Check, Share2, Copy, Bookmark } from 'lucide-react'

<YaTooltipActionsMenu type="labels">
  <YaTooltipActionItem icon={<Check />} label="Verify" active onClick={() => {}} />
  <YaTooltipActionItem icon={<Share2 />} label="Share" onClick={() => {}} />
  <YaTooltipActionItem icon={<Copy />} label="Copy" onClick={() => {}} />
  <YaTooltipActionItem icon={<Bookmark />} label="Save" onClick={() => {}} />
</YaTooltipActionsMenu>

import { useState } from 'react'
import { ThumbsUp, ThumbsDown, Flag } from 'lucide-react'

function FeedbackMenu() {
  const [activeAction, setActiveAction] = useState<string | null>(null)

  return (
    <YaTooltipActionsMenu type="labels">
      <YaTooltipActionItem 
        icon={<ThumbsUp />} 
        label="Good"
        active={activeAction === 'good'}
        onClick={() => setActiveAction('good')} 
      />
      <YaTooltipActionItem 
        icon={<ThumbsDown />} 
        label="Bad"
        active={activeAction === 'bad'}
        onClick={() => setActiveAction('bad')} 
      />
      <YaTooltipActionItem 
        icon={<Flag />} 
        label="Report"
        active={activeAction === 'report'}
        onClick={() => setActiveAction('report')} 
      />
    </YaTooltipActionsMenu>
  )
}

import { YaTooltip, YaTooltipProvider } from '@/components/ui/ya-tooltip'
import { MessageSquare } from 'lucide-react'

<YaTooltipProvider>
  <YaTooltipActionsMenu type="icons">
    <YaTooltip content="Verify content" arrow="top-center">
      <YaTooltipActionItem icon={<Check />} active onClick={() => {}} />
    </YaTooltip>
    <YaTooltip content="Share content" arrow="top-center">
      <YaTooltipActionItem icon={<Share2 />} onClick={() => {}} />
    </YaTooltip>
    <YaTooltip content="Send feedback" arrow="top-center">
      <YaTooltipActionItem icon={<MessageSquare />} onClick={() => {}} />
    </YaTooltip>
  </YaTooltipActionsMenu>
</YaTooltipProvider>

Quick Actions

import { Edit, Copy, Trash2, MoreHorizontal } from 'lucide-react'

<YaTooltipActionsMenu type="icons">
  <YaTooltipActionItem icon={<Edit />} onClick={() => {}} aria-label="Edit" />
  <YaTooltipActionItem icon={<Copy />} onClick={() => {}} aria-label="Copy" />
  <YaTooltipActionItem icon={<Trash2 />} onClick={() => {}} aria-label="Delete" />
  <YaTooltipActionItem icon={<MoreHorizontal />} onClick={() => {}} aria-label="More options" />
</YaTooltipActionsMenu>

const [selected, setSelected] = useState<string[]>(['verify'])

const toggleAction = (action: string) => {
  setSelected((prev) =>
    prev.includes(action) 
      ? prev.filter((a) => a !== action) 
      : [...prev, action]
  )
}

<YaTooltipActionsMenu type="icons" role="toolbar" aria-label="Text actions">
  <YaTooltipActionItem
    icon={<Check />}
    active={selected.includes('verify')}
    onClick={() => toggleAction('verify')}
    aria-label="Verify content"
  />
  <YaTooltipActionItem
    icon={<Share2 />}
    active={selected.includes('share')}
    onClick={() => toggleAction('share')}
    aria-label="Share content"
  />
</YaTooltipActionsMenu>

Dark Mode

The component automatically adapts to dark mode:

Mode	Background	Border
Light	White	`--ya-stone-50`
Dark	`--ya-stone-900`	`--ya-stone-700`

Props