Speed Dial

Agrupa ações rápidas relacionadas por trás de um único botão flutuante, revelando-as em uma direção configurável ao hover ou clique (`mk-speed-dial` + `mk-speed-dial-action`).

O mk-speed-dial agrupa múltiplas ações rápidas relacionadas — como "criar nota", "criar tarefa" e "criar evento" — por trás de um único botão flutuante. Ele reutiliza o mk-fab como gatilho internamente e revela um conjunto de mk-speed-dial-action (declaradas como filhas, via slot) na direção configurada, ao ser ativado por hover ou clique.

Padrão

Por padrão, o speed dial abre ao passar o mouse (openOn="hover") e expande as actions para cima (direction="up"). O ícone do trigger alterna para um ícone fixo de fechar quando aberto.

import { MkSpeedDial, MkSpeedDialAction } from '@db1/makuco-ui-react';

<MkSpeedDial icon="plus" label="Criar">
  <MkSpeedDialAction icon="file-text" label="Criar nota" />
  <MkSpeedDialAction icon="list-checks" label="Criar tarefa" />
  <MkSpeedDialAction icon="calendar" label="Criar evento" />
</MkSpeedDial>

<mk-speed-dial icon="plus" label="Criar">
  <mk-speed-dial-action icon="file-text" label="Criar nota"></mk-speed-dial-action>
  <mk-speed-dial-action icon="list-checks" label="Criar tarefa"></mk-speed-dial-action>
  <mk-speed-dial-action icon="calendar" label="Criar evento"></mk-speed-dial-action>
</mk-speed-dial>

Direção de expansão

direction controla para onde as actions se expandem a partir do trigger: up (padrão), down, left ou right. A primeira action do slot fica sempre mais próxima do trigger, e a ordem de tabulação segue o slot independentemente da direção visual.

<MkSpeedDial icon="plus" label="Criar" direction="right">
  <MkSpeedDialAction icon="file-text" label="Criar nota" />
  <MkSpeedDialAction icon="list-checks" label="Criar tarefa" />
  <MkSpeedDialAction icon="calendar" label="Criar evento" />
</MkSpeedDial>

<mk-speed-dial icon="plus" label="Criar" direction="right">
  <mk-speed-dial-action icon="file-text" label="Criar nota"></mk-speed-dial-action>
  <mk-speed-dial-action icon="list-checks" label="Criar tarefa"></mk-speed-dial-action>
  <mk-speed-dial-action icon="calendar" label="Criar evento"></mk-speed-dial-action>
</mk-speed-dial>

Gatilho de abertura: hover vs click

openOn="hover" (padrão) também responde a foco (Tab) — equivalente ao hover, para não quebrar navegação por teclado — e fecha ao mouseleave/focusout do componente inteiro. openOn="click" alterna o estado a cada ativação do trigger e fecha ao clicar fora, pressionar Escape ou clicar em uma action. Em ambos os modos, Escape sempre fecha e devolve o foco ao trigger.

<MkSpeedDial icon="plus" label="Criar" openOn="click">
  <MkSpeedDialAction icon="file-text" label="Criar nota" />
  <MkSpeedDialAction icon="list-checks" label="Criar tarefa" />
  <MkSpeedDialAction icon="calendar" label="Criar evento" />
</MkSpeedDial>

<mk-speed-dial icon="plus" label="Criar" open-on="click">
  <mk-speed-dial-action icon="file-text" label="Criar nota"></mk-speed-dial-action>
  <mk-speed-dial-action icon="list-checks" label="Criar tarefa"></mk-speed-dial-action>
  <mk-speed-dial-action icon="calendar" label="Criar evento"></mk-speed-dial-action>
</mk-speed-dial>

Ancoragem: fixed e absolute

position e strategy seguem o mesmo contrato do mk-fab, herdado diretamente no host do mk-speed-dial. strategy="fixed" (padrão) ancora à viewport respeitando env(safe-area-inset-*); strategy="absolute" ancora ao ancestral posicionado mais próximo — útil dentro de um mk-card, mk-drawer ou painel com scroll interno. Nesse caso, garanta que o container tenha position: relative.

Duas custom properties controlam o espaçamento e o empilhamento, e podem ser sobrescritas pelo consumidor: --mk-speed-dial-gap (padrão var(--db1-spacing-2)) e --mk-speed-dial-z-index (padrão 1000, consistente com --mk-fab-z-index).

Desabilitado

disabled impede a abertura por hover, foco ou clique no trigger. Se aplicado enquanto o speed dial já está aberto, ele fecha imediatamente.

<MkSpeedDial icon="plus" label="Criar" disabled>
  <MkSpeedDialAction icon="file-text" label="Criar nota" />
</MkSpeedDial>

<mk-speed-dial icon="plus" label="Criar" [disabled]="isDisabled">
  <mk-speed-dial-action icon="file-text" label="Criar nota"></mk-speed-dial-action>
</mk-speed-dial>

Props — mk-speed-dial

Prop	Tipo	Padrão	Descrição
`icon`	`IconName`	`"plus"`	Ícone do trigger quando fechado. Substituído por um ícone fixo de fechar (`x`) quando `open=true`.
`label`	`string`	—	Nome acessível do trigger, repassado como `label` ao `mk-fab` interno. Obrigatório.
`openOn`	`"hover" \| "click"`	`"hover"`	Gatilho de abertura. `hover` também responde a foco; `click` alterna o estado e fecha ao clicar fora, `Escape` ou clicar numa action.
`direction`	`"up" \| "down" \| "left" \| "right"`	`"up"`	Direção de expansão das actions a partir do trigger.
`position`	`"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"`	`"bottom-right"`	Canto de ancoragem, herdado do contrato do `mk-fab`.
`strategy`	`"fixed" \| "absolute"`	`"fixed"`	Estratégia de posicionamento CSS do host, herdada do contrato do `mk-fab`.
`open`	`boolean`	`false`	Estado de abertura. Não-controlado por padrão — gerenciado internamente conforme `openOn` — mas pode ser setado diretamente para uso controlado, no mesmo padrão de `mk-drawer.open`.
`disabled`	`boolean`	`false`	Desabilita o trigger, impedindo abertura por hover, foco ou clique.

Props — mk-speed-dial-action

Prop	Tipo	Padrão	Descrição
`icon`	`IconName`	—	Ícone exibido no botão circular. Obrigatório.
`label`	`string`	—	Passado como conteúdo do `mk-tooltip` interno; também é o nome acessível (`aria-label`) do botão. Obrigatório.
`disabled`	`boolean`	`false`	Desabilita a action individualmente, impedindo interação e emissão de `mkClick`.
`tooltipPlacement`	`TooltipPlacement`	`"top-center"`	Posicionamento do `mk-tooltip` interno. Dentro de um `mk-speed-dial`, é sincronizada automaticamente para o lado horizontal oposto ao canto de ancoragem do trigger — não precisa ser definida manualmente nesse caso.

Eventos

Evento	Componente	Payload	Descrição
`mkOpen`	`mk-speed-dial`	`void`	Emitido quando o speed dial é aberto (hover, clique no trigger, ou foco em modo `hover`).
`mkClose`	`mk-speed-dial`	`void`	Emitido quando é fechado (mouse leave/blur em modo `hover`; clique fora, `Escape` ou clique em uma action em modo `click`).
`mkClick`	`mk-speed-dial-action`	`void`	Emitido ao ativar a action (clique ou Enter/Space), quando não está `disabled`.

Slots

Componente	Slot	Descrição
`mk-speed-dial`	(default)	Uma ou mais `mk-speed-dial-action`. Ficam sempre montadas — mesmo fechadas — para permitir animação de entrada/saída; com `open=false` ficam inertes (não focáveis, não clicáveis) e visualmente recolhidas sobre o trigger.

Acessibilidade

O trigger (mk-fab) recebe aria-haspopup="true" e aria-expanded refletindo o estado open, sincronizados diretamente no botão interno — mk-fab não é modificado para isso.
O ícone do trigger nunca troca abruptamente para o ícone de fechar: os dois ícones são projetados no slot icon do mk-fab (cuja prop icon nunca é alterada) e fazem crossfade via CSS conforme open.
O wrapper das actions recebe role="group" com aria-label, agrupando-as semanticamente. Fica sempre montado no DOM, mas com inert enquanto open=false — remove as actions da árvore de acessibilidade e da ordem de tabulação sem montar/desmontar.
Cada mk-speed-dial-action tem seu próprio aria-label — nome acessível independente do mk-tooltip visual, que não é lido de forma confiável por todos os leitores de tela.
A tooltip de cada action abre para o lado horizontal oposto ao canto de ancoragem do trigger (position), sincronizada automaticamente pelo mk-speed-dial.
disabled reflete aria-disabled="true"/"false" no trigger e em cada action.
As transições de entrada/saída das actions e o crossfade do ícone respeitam prefers-reduced-motion.

Tecla	Comportamento
`Tab`	Move o foco entre trigger e actions, na ordem do slot — não entra na ordem de tabulação quando fechado.
`Enter` / `Espaço`	No trigger, alterna `open`; numa action, ativa (`mkClick`).
`Escape`	Fecha o speed dial e devolve o foco ao trigger.

Speed Dial

On this page