bkp

src/components/eli/EliTabela/EliTabelaCaixaDeBusca.vue

@@ -12,9 +12,11 @@
       <button
         type="button"
         class="eli-tabela__busca-botao"
+        aria-label="Buscar"
+        title="Buscar"
         @click="emitirBusca"
       >
-        Buscar
+        <Search class="eli-tabela__busca-botao-icone" :size="16" :stroke-width="2" aria-hidden="true" />
       </button>
     </div>
   </div>
@@ -22,9 +24,11 @@
 
 <script lang="ts">
 import { defineComponent, ref, watch } from "vue";
+import { Search } from "lucide-vue-next";
 
 export default defineComponent({
   name: "EliTabelaCaixaDeBusca",
+  components: { Search },
   props: {
     modelo: {
       type: String,
@@ -65,10 +69,9 @@ export default defineComponent({
 <style scoped>
 .eli-tabela__busca {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   justify-content: flex-end;
   gap: 8px;
-  margin-bottom: 12px;
   flex-wrap: wrap;
 }
 
@@ -95,6 +98,9 @@ export default defineComponent({
 }
 
 .eli-tabela__busca-botao {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: none;
   background: rgba(37, 99, 235, 0.12);
   color: rgba(37, 99, 235, 0.95);
@@ -103,6 +109,10 @@ export default defineComponent({
   transition: background-color 0.2s ease, color 0.2s ease;
 }
 
+.eli-tabela__busca-botao-icone {
+  display: block;
+}
+
 .eli-tabela__busca-botao:hover,
 .eli-tabela__busca-botao:focus-visible {
   background: rgba(37, 99, 235, 0.2);