SplitButton

O componente SplitButton permite às pessoas usuárias executar ações clicando em um botão principal e exibindo um menu suspenso com ações adicionais.

Default

Desabilitado

Combina um botão principal com ações secundárias em um menu suspenso.

import React from "react";
import { SplitButton } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <SplitButton>
    <SplitButton.Primary>Add product</SplitButton.Primary>
    <SplitButton.Secondary>
      <SplitButton.Action>Add product and duplicate</SplitButton.Action>
      <SplitButton.Action>Add product from template</SplitButton.Action>
      <SplitButton.Action>Add multiple products</SplitButton.Action>
    </SplitButton.Secondary>
  </SplitButton>
);

export default Example;

Definição

O SplitButton é um componente composto que combina uma ação principal com um conjunto de ações secundárias relacionadas. Oferece eficiência ao permitir executar a ação mais comum diretamente, e ao mesmo tempo, acessar opções adicionais através de um menu suspenso. É ideal para manter a interface limpa sem sacrificar funcionalidades-chave.

Anatomia do componente

O SplitButton é composto por:

Main Button: Executa a ação padrão.
Secondary Button: Abre um Popover com ações secundárias.
Popover: Contém as opções adicionais em um menu suspenso.

Dependências

Este componente utiliza:

Popover - Para exibir o menu suspenso com as ações secundárias.
Icon - Para exibir ícones nas opções do menu.
Label - Para os rótulos de texto nos botões e opções.

Guidelines

Quando usar

Use o SplitButton quando:

Existe uma ação principal clara e previsível (como "Salvar" ou "Criar").
Existem ações adicionais relacionadas, mas de menor frequência de uso.
Deseja-se evitar ocupar múltiplos espaços com botões secundários.
As ações secundárias estão contextualmente relacionadas com a ação principal.

Quando não usar

Evite usá-lo quando:

Não há uma ação principal destacada entre as opções.
O menu contém mais de 4 opções, pois pode dificultar a navegação.
As ações do menu não estão relacionadas entre si.
Todas as ações têm a mesma importância.

Critérios de usabilidade e produtividade

Minimiza o uso do mouse: Permite executar a ação principal com Enter ou clique direto.
Otimiza o fluxo de trabalho: Prioriza a opção mais usada, reduzindo passos.
Evita sobrecarregar a interface: Agrupa ações similares em um único ponto.
Facilita a descoberta: As pessoas usuárias podem explorar opções relacionadas sem abandonar o contexto atual.

Acessibilidade

Navegação completa com teclado: Tab para foco, Enter para ação principal, seta para baixo para abrir menu.
Rótulos claros e descrições em cada opção do menu suspenso.
Roles ARIA: aria-haspopup="menu" no botão suspenso.
Tamanhos de clique/toque mínimos: 32×32 px para cumprir com padrões de acessibilidade.
Indicadores de foco visíveis para cada ação.
Evitar depender da cor para distinguir estados.
Suporte para leitores de tela que comuniquem claramente a estrutura e opções disponíveis.

Recomendações de uso

Agrupar ações de exportação (Exportar como PDF, Exportar como Excel).
Combinar ações de salvamento (Salvar, Salvar e continuar, Salvar como rascunho).
Gerenciar ações de criação (Criar produto, Criar produto e duplicar, Criar produto a partir de modelo).

Componentes relacionados

Button - Pode ser usado para ações individuais sem opções secundárias.
Dropdown - Pode ser usado quando todas as opções têm o mesmo nível de importância.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/split-button

Props

Propriedades adicionais são repassadas ao elemento <SplitButton>. Consulte a documentação do elemento button para ver a lista de atributos aceitos pelo elemento <SplitButton>.

SplitButton

Name	Type	Default	Description
children*	React.ReactNode		The subcomponents (Primary and Secondary).
disabled	boolean	'false'	Disables the entire split button.
open	boolean		Controls the visibility of the popover.
onOpenChange	(open: boolean) => void;		Callback function to control popover opening and closing.
popoverPosition	'bottom' 'bottom-end' 'bottom-start' 'left' 'left-end' 'left-start' 'right' 'right-end' 'right-start' 'top' 'top-end' 'top-start'	'bottom-end'	Position of the popover relative to the button.