Button

Apresentação

O componente Button é responsável por criar elementos interativos para ações do usuário. Ele oferece diferentes estilos visuais e comportamentos que podem ser aplicados aos botões, tornando-os versáteis para diversos contextos de uso.

Quando usar

• Para ações principais em formulários
• Para confirmações de operações
• Para navegação entre páginas
• Para abrir modais
• Para submeter formulários
• Para ações secundárias
• Para cancelar operações
• Para ações de destaque
• Para ações de perigo
• Para ações de sucesso

Forma básica de uso

import { Button } from 'eitri-luminus';

// Botão básico
<Button>Clique aqui</Button>

// Botão com diferentes cores
<Button className="btn-primary">Primário</Button>
<Button className="btn-secondary">Secundário</Button>
<Button className="btn-accent">Destaque</Button>
<Button className="btn-danger">Perigo</Button>
<Button className="btn-warning">Alerta</Button>
<Button className="btn-success">Sucesso</Button>
<Button className="btn-info">Informação</Button>

// Botão com ícone
<Button className="btn-primary">
  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
  </svg>
  Adicionar
</Button>

// Botão desabilitado
<Button disabled>Desabilitado</Button>

// Botão com evento de clique
<Button onClick={() => console.log('Clicou!')}>
  Clique para ação
</Button>

// Botão que abre um modal
<Button linkToModal="meu-modal">
  Abrir Modal
</Button>

// Button com métodos via ref
import { useRef } from 'react';

const MyComponent = () => {
  const buttonRef = useRef<Button>(null);

  const handleClick = () => {
    buttonRef.current?.click();
  };

  const handleFocus = () => {
    buttonRef.current?.focus();
  };

  const handleGetDisabled = () => {
    const isDisabled = buttonRef.current?.getDisabled();
    console.log('Botão está desabilitado:', isDisabled);
  };

  const handleSetDisabled = () => {
    buttonRef.current?.setDisabled(true);
  };

  return (
    <div>
      <Button ref={buttonRef}>Meu Botão</Button>
      <button onClick={handleClick}>Clicar no botão via ref</button>
      <button onClick={handleFocus}>Focar no botão</button>
      <button onClick={handleGetDisabled}>Verificar se está desabilitado</button>
      <button onClick={handleSetDisabled}>Desabilitar botão</button>
    </div>
  );
};

Métodos via Ref

O componente Button expõe os seguintes métodos públicos que podem ser acessados através de uma ref:

Método	Tipo de Retorno	Descrição
click()	void	Simula um clique no botão
focus()	void	Foca no botão
getDisabled()	boolean	Retorna se o botão está desabilitado
setDisabled(disabled: boolean)	void	Define se o botão está desabilitado

Exemplo de uso dos métodos

import { useRef } from 'react';
import { Button } from 'eitri-luminus';

const MyForm = () => {
  const submitButtonRef = useRef<Button>(null);

  const handleFormSubmit = () => {
    // Desabilita o botão após o envio
    submitButtonRef.current?.setDisabled(true);
    
    // Simula envio
    setTimeout(() => {
      console.log('Formulário enviado!');
      // Reabilita o botão após 2 segundos
      submitButtonRef.current?.setDisabled(false);
    }, 2000);
  };

  return (
    <div>
      <form onSubmit={handleFormSubmit}>
        {/* campos do formulário */}
        <Button ref={submitButtonRef} type="submit">
          Enviar
        </Button>
      </form>
    </div>
  );
};

Propriedades

Propriedade	Tipo	Descrição
onClick	function	Função chamada ao clicar no botão
disabled	boolean	Desabilita o botão
linkToModal	string	ID do modal a ser aberto
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Heranças

O componente Button herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'btn' para estilização base
• Por padrão, aplica a classe 'btn-primary' se nenhuma cor for especificada
• Suporta diferentes variantes de estilo (primary, secondary, accent, etc)
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Mantém a semântica HTML apropriada
• Pode conter ícones e conteúdo rico
• Suporta integração com modais
• Pode ser desabilitado
• É especialmente útil para ações do usuário
• Pode ser combinado com outros componentes
• Suporta diferentes tamanhos e estilos
• Mantém o tipo "button" por padrão
• Suporta métodos públicos via ref para controle programático (click, focus, getDisabled, setDisabled)