ButtonIcon

ButtonIcon compõe o componente Button, exceto que ele renderiza apenas um ícone.

Importação

import { ButtonIcon } from '@escaletech/delta'

Utilização

Editor de código

<ButtonIcon icon={<FiPhone />} />

<ButtonIcon icon={<FiPhone />} />

Resultado

Loading...

Tamanhos de Botão

Use a propriedade size para alterar o tamanho do botão.

Editor de código

<> <ButtonIcon icon={<FiPhone />} size="small" variant='secondary'/> <hr /> <ButtonIcon icon={<FiPhone />} size="medium" variant='secondary'/> <hr /> <ButtonIcon icon={<FiPhone />} size="large" variant='secondary'/> </>

<>
  <ButtonIcon icon={<FiPhone />} size="small" variant='secondary'/>
  <hr />
  <ButtonIcon icon={<FiPhone />} size="medium" variant='secondary'/>
  <hr />
  <ButtonIcon icon={<FiPhone />} size="large" variant='secondary'/>
</>

Resultado

Loading...

Variantes de Botão

Use a propriedade variant para alterar o estilo visual do Botão. Você pode definir o valor como primary ou secondary.

Editor de código

<Fragment> <ButtonIcon icon={<FiPhone />} variant="primary" /> <hr /> <ButtonIcon icon={<FiPhone />} variant="secondary" /> </Fragment>

<Fragment>
  <ButtonIcon icon={<FiPhone />} variant="primary" />

  <hr />

  <ButtonIcon icon={<FiPhone />} variant="secondary" />
</Fragment>

Resultado

Loading...

Botão arredondado

Passe a propriedade round para que seu botão fique redondo.

Editor de código

<ButtonIcon icon={<FiPhone />} round/>

<ButtonIcon icon={<FiPhone />} round/>

Resultado

Loading...

Estado de carregamento do botão

Passe a propriedade loading para mostrar seu estado de carregamento. Por padrão, o botão mostrará um ícone giratório.

Você também pode passar a propriedade loadingIcon para alterar o ícone de carregamento que é exibido.

Editor de código

<Fragment> <ButtonIcon icon={<AiOutlineClose />} loading /> <hr /> <ButtonIcon icon={<AiOutlineClose />} loading loadingIcon={<AiOutlineLoading3Quarters />} /> </Fragment>

<Fragment>
  <ButtonIcon icon={<AiOutlineClose />} loading />

  <hr />

  <ButtonIcon
    icon={<AiOutlineClose />}
    loading
    loadingIcon={<AiOutlineLoading3Quarters />}
  />
</Fragment>

Resultado

Loading...

Botão desabilitado

Passe a propriedade disabled para que seu botão tenha comportamento de desabilitado.

Editor de código

<> <ButtonIcon icon={<FiPhone />} disabled /> <hr /> <ButtonIcon icon={<FiPhone />} disabled variant='secondary' /> </>

<>
  <ButtonIcon icon={<FiPhone />} disabled />

  <hr />

  <ButtonIcon icon={<FiPhone />} disabled variant='secondary' />
</>

Resultado

Loading...

Props

Propriedade	Descrição	Tipo	Padrão	Obrigatório
icon	Adiciona um ícone no botão	JSX.Element	-	❌
outlined	Se for true, o botão fica com borda e fundo transparente.	boolean	false	❌
disabled	Se for true, o botão será desabilitado.	boolean	false	❌
round	Se for true, o botão ficará perfeitamente redondo.	boolean	false	❌
loading	Se for true, o botão mostrará um botão giratório.	boolean	false	❌
loadingIcon	Define o ícone exibido no carregamento do botão	JSX.Element	-	❌
size	Define o tamanho do botão	string	medium	❌
variant	Define o estilo visual do Botão	string	primary	❌

Aceita todos as propriedades suportados por botões nativos.