0

Estou tentando fazer um botão no react, mas infelizmente não consigo por Icon atrás da frase

Quero conseguir por o icon atrás da frase

import React from 'react';
export function BotaoMenu(){
  return(
  <>
  <div className="row-flex-auto ">
    <div className="p-0 mt-0 mb-3">
   
  <a type="button" className="bg-blue-700 hover:bg-blue-800 text-white font-bold py-2 px-4 rounded-full px-12 " href="/">
  <div className="">
  <IconPardao/>
  </div>
  <h4 className="ml-4">  Menu Teste</h4>
  
  </a>
  </div>
    
    </div>
  </>
  );
}

export function IconPardao(){
return(
  <>
  <div >  
  <img className="h-4 w-4" src={teste} />

  </div>

  </>
);

}
export default BotaoPadrao;

1 Resposta 1

0

Você pode resolver isso bem facilmente com CSS usando flex.

.container {
  width: 100%;
  display: flex; /* Define que o display dentro do container será flex */
  flex-direction: row; /* Define que os elementos ficarão organizados em linhas */
  align-items: baseline; /* Centraliza o elementos numa linha de base */
  background: lightgray;
}

.container span {
  background: lightyellow;
}

.container h4 {
  background: aqua;
  margin-left: 10px;
}
<div class="container">
  <span>Ícone</span>
  <h4>Isso é um teste</h4>
</div>

3
  • Gostei da ideia, mas existe algo in line? pois eu estou usando o tailwind e eu nem sei como importar algo para o react. Peço desculpa pela minha falta de prática. 8/10/2020 às 19:10
  • Só aplicar a mesma ideia como CSS inline...
    – Jéf Bueno
    8/10/2020 às 19:13
  • Obrigado pela ajuda, irei rever mais sobre os padrão do tailwind, pois estou muito confuso de como usar ele. 8/10/2020 às 19:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .