Botão de ícone

Um botão secundário quadrado só com ícones - médio 36px (20px ícone) e pequeno 32px (16px ícone), ambos raio 10. Usado para ações de linha, sinos de cabeçalho e controles de barra de ferramentas.

Instalação

Você pode adicionar este componente de botão de ícone usando o nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

CLI

Manual

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add icon-button

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Tamanhos e estados

Passar qualquer referência de componente de Ícones de Remix via ícone, escolher um tamanho, e sempre fornecer um aria-label - não há texto visível.

<IconButton icon={RiEditLine} size="medium" aria-label="Edit" /> {/* 36px, 20px icon */}<IconButton icon={RiEditLine} size="small" aria-label="Edit" />  {/* 32px, 16px icon */}
{/* Disabled */}<IconButton icon={RiEditLine} aria-label="Edit" disabled />