Home/Componentes/HeaderButton

HeaderButton

Componente de botão especializado para cabeçalhos de aplicações, com suporte a ícones, badges de notificação, conteúdo personalizado e temas. Seguindo o padrão do hollow-UI.

Botões Básicos

HeaderButtons simples com ícones e tooltips:

Uso Básico

import { HeaderButton } from "@/registry/ui/HeaderButton";
import { Settings, User, Search, Shield } from "lucide-react";

<HeaderButton 
  icon={Settings} 
  title="Configurações"
  onClick={() => alert("Configurações clicadas!")}
/>
<HeaderButton 
  icon={User} 
  title="Perfil do usuário"
  onClick={() => alert("Perfil clicado!")}
/>

Botões com Badge de Notificação

HeaderButtons com badges para indicar notificações ou contadores:

Botões com Badge

<HeaderButton 
  icon={Bell}
  title="Notificações"
  onClick={handleBellClick}
  showBadge={true}
  badgeCount={3}
/>
<HeaderButton 
  icon={MessageSquare}
  title="Mensagens" 
  onClick={handleMessageClick}
  showBadge={true}
  badgeCount={8}
/>

Conteúdo Personalizado

HeaderButtons com conteúdo personalizado como imagens ou elementos personalizados:

Conteúdo Personalizado

<HeaderButton 
  title="Assistant"
  onClick={() => alert("Assistant clicked!")}
>
  <Image
    src="/knight.gif"
    alt="Assistant"
    width={375}
    height={335}
    className="h-5 w-auto dark:hidden"
  />
  <Image
    src="/knight.gif"
    alt="Assistant"
    width={375}
    height={335}
    className="h-5 w-auto hidden dark:block"
  />
</HeaderButton>

<HeaderButton 
  title="Texto personalizado"
  onClick={() => alert("Texto clicado!")}
>
  <span className="text-xs font-bold">DEV</span>
</HeaderButton>

Variações de Estilo

HeaderButtons com diferentes variants do componente Button:

Diferentes Variants

<HeaderButton 
  icon={Download}
  title="Ghost (padrão)"
  variant="ghost"
  onClick={() => alert("Ghost!")}
/>
<HeaderButton 
  icon={Upload}
  title="Default"
  variant="default"
  onClick={() => alert("Default!")}
/>
<HeaderButton 
  icon={RefreshCw}
  title="Secondary"
  variant="secondary"
  onClick={() => alert("Secondary!")}
/>

Estados e Interações

HeaderButtons demonstrando diferentes estados (habilitado/desabilitado):

Estados Diferentes

<HeaderButton 
  icon={Settings}
  title="Botão habilitado"
  onClick={() => alert("Habilitado!")}
/>
<HeaderButton 
  icon={Settings}
  title="Botão desabilitado"
  onClick={() => alert("Não deveria funcionar!")}
  disabled={true}
/>

Exemplo de Header Completo

Como seria um header completo usando HeaderButtons (simulando o hollow-UI):

Header Completo

<div className="bg-red-600 text-white p-4 rounded-lg">
  <div className="flex items-center justify-between">
    {/* Logo */}
    <div className="flex items-center">
      <Image src="/just-logo.png" alt="EXAMPLE" className="h-9 w-max" />
    </div>

    {/* Actions */}
    <div className="flex items-center space-x-1">
      <HeaderButton 
        icon={Bell}
        title="Notificações"
        showBadge={true}
        badgeCount={5}
      />
      <HeaderButton 
        title="Assistant"
      >
        <Image src="/knight.gif" alt="Assistant" className="h-5 w-auto dark:hidden" />
        <Image src="/knight.gif" alt="Assistant" className="h-5 w-auto hidden dark:block" />
      </HeaderButton>
      <HeaderButton icon={Settings} title="Configurações" />
      <HeaderButton icon={User} title="Perfil" />
    </div>
  </div>
</div>

Interface e Props

HeaderButton Interface

interface HeaderButtonProps {
  /** Ícone do Lucide React */
  icon?: LucideIcon;
  /** Conteúdo personalizado do botão (para imagens ou outros elementos) */
  children?: React.ReactNode;
  /** Texto do tooltip que aparece ao fazer hover */
  title?: string;
  /** Função executada ao clicar no botão */
  onClick?: () => void;
  /** Variant do botton (padrão: ghost) */
  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
  /** Tamanho do botão (padrão: sm) */
  size?: "default" | "sm" | "lg" | "icon";
  /** Classes CSS adicionais */
  className?: string;
  /** Se verdadeiro, mostra um badge de notificação */
  showBadge?: boolean;
  /** Número para exibir no badge */
  badgeCount?: number;
  /** Se verdadeiro, desabilita o botão */
  disabled?: boolean;
}

Props Principais

icon - Ícone do Lucide React (opcional)
children - Conteúdo personalizado (opcional)
title - Tooltip text (opcional)
onClick - Função de clique (opcional)

Características

• Estilo otimizado para headers
• Badges de notificação automáticos
• Suporte a conteúdo personalizado
• Hover effects e transições
• Totalmente acessível
• Suporte completo a temas