Skip to main content

IconButton

O componente IconButton é um botão circular que exibe apenas um ícone. É ideal para ações secundárias, controles de interface e navegação compacta. Suporta diferentes tamanhos, estados e pode ser usado como link.

Importação​

import { IconButton } from '@useblu/ocean-react';

Importação específica (recomendado para tree-shaking)​

import { IconButton } from '@useblu/ocean-react/IconButton';

Importação de tipos TypeScript​

import type { IconButtonProps } from '@useblu/ocean-react';

// Uso em componente customizado
const MyIconButton: React.FC<{ icon: React.ReactNode; action: () => void }> = ({
  icon,
  action,
}) => {
  return <IconButton onClick={action}>{icon}</IconButton>;
};

Playground Interativo​

Explore o componente IconButton no playground interativo do Storybook:

🚀 Abrir no Storybook

Documentação Completa​

Para documentação técnica detalhada, exemplos de uso e API completa, consulte o Storybook do IconButton.

No Storybook você encontrará:

  • ✅ Controles interativos para testar todas as props
  • ✅ API gerada automaticamente com tipagem completa
  • ✅ Exemplos visuais de todas as variantes e estados
  • ✅ Playground para experimentação rápida

Uso básico​

<IconButton>
  <Plus />
</IconButton>

Tamanhos​

O IconButton suporta dois tamanhos:

🚀 Abrir no Storybook

Estados​

O IconButton suporta diferentes estados visuais:

🚀 Abrir no Storybook

O IconButton pode ser usado como link:

🚀 Abrir no Storybook

Interativo​

Exemplo de IconButton com funcionalidade interativa:

🚀 Abrir no Storybook

API​

Props​

PropTipoPadrãoDescrição
childrenReactNode-Ícone a ser exibido no botão
componentElementType'button'Elemento HTML ou componente usado como root
size'sm' | 'md''md'Tamanho do botão
disabledbooleanfalseDesabilita o botão
onClick(event: MouseEvent) => void-Função chamada ao clicar no botão
classNamestring-Classes CSS adicionais

Classes CSS​

O componente utiliza as seguintes classes CSS que podem ser customizadas:

ClasseDescrição
.ods-icon-btnContainer principal do IconButton
.ods-icon-btn--smModificador para tamanho pequeno
.ods-icon-btn--mdModificador para tamanho médio
.ods-icon-btn--disabledModificador para botão desabilitado

Acessibilidade​

  • ✅ Suporte completo a navegação por teclado
  • ✅ Estados de foco visíveis
  • ✅ Atributos ARIA apropriados
  • ✅ Suporte a screen readers
  • ✅ Contraste adequado em todos os estados

Boas práticas​

  • Use aria-label para descrever a ação do botão
  • Use ícones semânticos que representem a ação
  • Mantenha consistência no uso de ícones similares
  • Use estado disabled quando a ação não estiver disponível

Melhores práticas​

✅ Faça​

  • Use para ações secundárias e controles de interface
  • Sempre forneça um aria-label descritivo
  • Use ícones que representem claramente a ação
  • Use tamanho sm para interfaces compactas
  • Use tamanho md para interfaces padrão
  • Use estado disabled quando apropriado

❌ Não faça​

  • Não use para ações primárias importantes
  • Não use ícones genéricos ou confusos
  • Não omita aria-label para acessibilidade
  • Não use tamanhos muito grandes ou pequenos
  • Não ignore estados de foco e hover
  • Não use para navegação principal

Casos de uso comuns​

Botão de fechar​

function CloseButton() {
  return (
    <IconButton aria-label="Fechar" onClick={() => console.log('Fechar')}>
      <XOutline />
    </IconButton>
  );
}

Botão de editar​

function EditButton() {
  return (
    <IconButton aria-label="Editar item" onClick={() => console.log('Editar')}>
      <Edit />
    </IconButton>
  );
}

Botão de excluir​

function DeleteButton() {
  return (
    <IconButton
      aria-label="Excluir item"
      onClick={() => console.log('Excluir')}
      disabled={isDeleting}
    >
      <Trash />
    </IconButton>
  );
}
function ExternalLinkButton() {
  return (
    <IconButton
      component="a"
      href="https://example.com"
      target="_blank"
      aria-label="Abrir link externo"
    >
      <ExternalLink />
    </IconButton>
  );
}

Botão de toggle​

function ToggleButton() {
  const [isExpanded, setIsExpanded] = React.useState(false);

  return (
    <IconButton
      aria-label={isExpanded ? 'Recolher' : 'Expandir'}
      onClick={() => setIsExpanded(!isExpanded)}
    >
      {isExpanded ? <ChevronUp /> : <ChevronDown />}
    </IconButton>
  );
}

Botão de adicionar​

function AddButton() {
  return (
    <IconButton
      aria-label="Adicionar novo item"
      onClick={() => console.log('Adicionar')}
      size="sm"
    >
      <Plus />
    </IconButton>
  );
}

Grupo de ações​

function ActionButtons() {
  return (
    <div>
      <IconButton aria-label="Editar" size="sm">
        <Edit />
      </IconButton>
      <IconButton aria-label="Duplicar" size="sm">
        <Copy />
      </IconButton>
      <IconButton aria-label="Excluir" size="sm">
        <Trash />
      </IconButton>
    </div>
  );
}