Skip to Content
ComponentsAtomsContext Menu

Context Menu

Atom

Context Menu oferece ações sobre um alvo específico. Toda ação precisa existir também por caminho visível/acessível.

Exemplos copiáveis

React

import * as React from "react"
 
type ContextAction = { label: string; destructive?: boolean; onSelect: () => void }
 
export function PulsoContextMenu({ actions }: { actions: ContextAction[] }) {
  return (
    <div role="menu" className="w-56 rounded-[var(--radius-md)] border border-[var(--border)] bg-[var(--popover)] p-1 shadow-[var(--shadow-lg)]">
      {actions.map((action) => (
        <button key={action.label} role="menuitem" type="button" onClick={action.onSelect} className={[
          "flex w-full rounded-[var(--radius-sm)] px-3 py-2 text-left text-sm hover:bg-[var(--muted)] focus-visible:outline focus-visible:outline-[var(--ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--ring)]",
          action.destructive ? "text-[var(--destructive)]" : "text-[var(--fg)]",
        ].join(" ")}>{action.label}</button>
      ))}
    </div>
  )
}
<PulsoContextMenu actions={[{ label: "Ver evidências", onSelect: openEvidence }, { label: "Arquivar menção", onSelect: archive }]} />

Regras

  1. Não dependa só de clique direito.
  2. Ação destrutiva precisa confirmação proporcional.
  3. Menu contextual age sobre um alvo claro.
  4. Use atalhos apenas quando funcionam de fato.
Last updated on
TooltipDrawer