FAB

O mk-fab é um botão de ação flutuante (FAB) que se ancora a um dos 4 cantos da viewport (strategy="fixed", padrão) — ou de um container posicionado (strategy="absolute") — para destacar a ação primária de uma tela, como "criar item" ou "compor mensagem". Suporta um modo compacto (apenas ícone, círculo) e um modo extended (ícone + rótulo visível, pill), além de integração nativa com formulários via ElementInternals.

Padrão

Por padrão, o botão é ancorado ao canto inferior direito (position="bottom-right") com strategy="fixed", exibindo apenas o ícone. O label é sempre obrigatório — ele vira aria-label no modo compacto e texto visível no modo extended.

import { MkFab } from '@db1/makuco-ui-react';

<MkFab icon="plus" label="Adicionar item" />

<mk-fab icon="plus" label="Adicionar item"></mk-fab>

Posições

position ancora o botão a um dos 4 cantos: bottom-right (padrão), bottom-left, top-right ou top-left.

<MkFab icon="plus" label="Adicionar" position="top-left" />
<MkFab icon="plus" label="Adicionar" position="top-right" />
<MkFab icon="plus" label="Adicionar" position="bottom-left" />
<MkFab icon="plus" label="Adicionar" position="bottom-right" />

<mk-fab icon="plus" label="Adicionar" position="top-left"></mk-fab>
<mk-fab icon="plus" label="Adicionar" position="top-right"></mk-fab>
<mk-fab icon="plus" label="Adicionar" position="bottom-left"></mk-fab>
<mk-fab icon="plus" label="Adicionar" position="bottom-right"></mk-fab>

Tamanhos

size controla o diâmetro no modo compacto e a altura no modo estendido: sm, md (padrão) ou lg. Mesmo no menor tamanho a área de toque respeita 44×44px.

<MkFab icon="plus" label="Adicionar" size="sm" />
<MkFab icon="plus" label="Adicionar" size="md" />
<MkFab icon="plus" label="Adicionar" size="lg" />

<mk-fab icon="plus" label="Adicionar" size="sm"></mk-fab>
<mk-fab icon="plus" label="Adicionar" size="md"></mk-fab>
<mk-fab icon="plus" label="Adicionar" size="lg"></mk-fab>

Intenções

Use kind="destructive" para ações destrutivas ou irreversíveis — como excluir os itens selecionados em massa.

<MkFab icon="trash-2" label="Excluir selecionados" kind="destructive" />

<mk-fab icon="trash-2" label="Excluir selecionados" kind="destructive"></mk-fab>

Extended

extended alterna entre o formato círculo (ícone apenas) e o formato pill (ícone + rótulo visível lado a lado), animando a transição entre os dois modos.

<MkFab icon="plus" label="Adicionar item" extended />

<mk-fab icon="plus" label="Adicionar item" extended></mk-fab>

Ancoragem: fixed e absolute

strategy="fixed" (padrão) usa position: fixed, ancorando o botão à viewport e respeitando env(safe-area-inset-*) em dispositivos com notch/home indicator. Use strategy="absolute" para ancorar 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.

{/* ancorado à viewport (padrão) */}
<MkFab icon="plus" label="Adicionar" />

{/* ancorado ao container pai */}
<div style={{ position: 'relative', height: '400px' }}>
  <MkFab icon="plus" label="Adicionar" strategy="absolute" />
</div>

<!-- ancorado à viewport (padrão) -->
<mk-fab icon="plus" label="Adicionar"></mk-fab>

<!-- ancorado ao container pai -->
<div style="position: relative; height: 400px;">
  <mk-fab icon="plus" label="Adicionar" strategy="absolute"></mk-fab>
</div>

Três custom properties controlam o posicionamento e podem ser sobrescritas pelo consumidor: --mk-fab-offset-x (padrão var(--db1-spacing-6)), --mk-fab-offset-y (padrão var(--db1-spacing-6)) e --mk-fab-z-index (padrão 1000).

Ícone customizado

Use o slot icon para substituir o ícone renderizado a partir da prop icon por um SVG customizado.

<MkFab label="Ação customizada">
  <svg slot="icon" viewBox="0 0 24 24">{/* ... */}</svg>
</MkFab>

<mk-fab label="Ação customizada">
  <svg slot="icon" viewBox="0 0 24 24"><!-- ... --></svg>
</mk-fab>

Formulários

mk-fab é form-associated: type="submit" aciona form.requestSubmit() e type="reset" aciona form.reset() no formulário ancestral, mesmo estando dentro de Shadow DOM.

<form onSubmit={handleSubmit}>
  <MkFab type="submit" icon="check" label="Enviar" strategy="absolute" />
</form>

<form (ngSubmit)="handleSubmit()">
  <mk-fab type="submit" icon="check" label="Enviar" strategy="absolute"></mk-fab>
</form>

Desabilitado

<MkFab icon="plus" label="Adicionar" disabled />

<mk-fab icon="plus" label="Adicionar" [disabled]="isDisabled"></mk-fab>

Props

Eventos

Slots

Acessibilidade

• Renderiza um <button> nativo internamente — suporte a teclado (Enter / Space) e foco inclusos.
• Modo compacto (extended=false): a prop label define o aria-label do botão, já que apenas o ícone é visível.
• Modo estendido (extended=true): o texto do label já está visível como conteúdo do botão — nenhum aria-label redundante é adicionado, evitando duplicação em leitores de tela.
• O ícone interno (<mk-icon>) já aplica aria-hidden="true" automaticamente; ao usar um SVG customizado via slot icon, garanta o mesmo.
• disabled reflete no atributo HTML nativo do <button>, removendo o elemento da ordem de tabulação e da árvore de acessibilidade interativa.
• Foco visível: o anel de foco (:focus-visible) é especialmente importante neste componente por estar sobreposto a conteúdo de fundo variável — não remova o outline sem substituí-lo.
• Área de toque: mesmo no tamanho sm, a área mínima respeita 44×44px (WCAG 2.5.5), já que o FAB é frequentemente o único ponto de ação em contexto mobile.