Botão de fechar

A circular é usada para descartar superfícies compactas, anúncios, torradas, modais e gavetas. Cada tamanho torna seu próprio glifo com um traço literal (não escalado) - 1.6px em 2xs, 2px em xs/sm e 2.5px em md - assim o peso permanece pixel-verdade.

2xs
xs
sm
md

Instalação

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

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

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 close-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

Quatro tamanhos através do tamanho prop - 16, 20, 24, e 32px. aria-label, o controle não tem texto visível.

<CloseButton size="2xs" aria-label="Close" /> {/* 16px, 1.6px stroke */}<CloseButton size="xs" aria-label="Close" /> {/* 20px, 2px stroke */}<CloseButton size="sm" aria-label="Close" /> {/* 24px, 2px stroke */}<CloseButton size="md" aria-label="Close" /> {/* 32px, 2.5px stroke */}

Em um cabeçalho modal

Título modal

<header className="flex items-center justify-between p-4"> <p className="text-body-medium text-text-primary">Modal title</p> <CloseButton size="md" aria-label="Close modal" onClick={onClose} /></header>