Navegar componentes

IconButton

ButtonExemplo

Um button que exibe apenas um ícone sem texto visível. Use IconButton em toolbars, linhas de tabela e UI compacta onde o espaço é limitado e o ícone é universalmente compreendido.

Importação

import {IconButton} from '@pharos-ds/core/IconButton';

Exemplos

Área interativa

variant

size

isDisabled

Código

import {IconButton} from '@pharos-ds/core/IconButton';

<IconButton
  label="Adicionar"
  variant="secondary"
  size="md"
  isDisabled={false}
 />

Boas práticas

Faça: Torne o aria-label específico: um ícone de lixeira rotulado "Delete conversation" é mais claro do que apenas "Delete" para leitores de tela.
Faça: Adicione um tooltip: mesmo um ícone de engrenagem pode significar Settings, Preferences ou Configure.
Faça: Use ghost em toolbars e áreas densas para reduzir desordem visual.
Evite: Use IconButton se a ação não for óbvia pelo ícone sozinho; use Button com texto.
Evite: Omita o tooltip; o label alcança apenas leitores de tela, usuários visuais precisam da dica no hover.

Props

Prop	Tipo	Padrão	Descrição
`label` *	`string`	—	Label acessível. Usado como aria-label (não renderizado como texto visível).
`icon` *	`ReactNode`	—	Elemento de ícone renderizado dentro do button.
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'destructive'`	`'secondary'`	Variante de estilo visual.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Variante de size.
`elevation`	`'none' \| 'low' \| 'med' \| 'high'`	`'none'`	Profundidade de sombra em repouso. A forma FAB mais comum é um button icon-only, então eleve-o com `low`/`med`/`high` para um floating action button. `none` é o button plano padrão.
`isLoading`	`boolean`	`false`	Exibe um spinner de carregamento e desabilita interação.
`isDisabled`	`boolean`	`false`	Desabilita o button.
`tooltip`	`string`	—	Texto de tooltip exibido no hover.
`onClick`	`(e: MouseEvent) => void`	—	Handler de clique padrão.
`clickAction`	`(e: MouseEvent) => void \| Promise<void>`	—	Handler de clique assíncrono com estado de carregamento automático.

Pacote: @pharos-ds/core · Import: @pharos-ds/core/IconButton