LxComponentsLxButton
Visão geral
O componente LxButton é utilizado para renderizar um botão com diversas opções de personalização que é fiel ao design system da Linx. Ele suporta diversas propriedades para customização e slots.
Clique para visualizar o código
vue
<script setup>
import { LxButton } from '@lde/lxcomponents';
</script>
<template>
<LxButton id="'btn-exemplo'" label="Botão exemplo" />
</template>Propriedades
| Nome | Descrição | Tipo | Padrão |
|---|---|---|---|
| label | Rótulo do botão. | String | '' |
| icon | Classe do ícone a ser exibido no botão. | String | '' |
| iconPos | Posição do ícone ('left', 'right'). | String | 'right' |
| loading | Indica se o botão está em estado de carregamento. | Boolean | false |
| loadingIcon | Classe do ícone de carregamento a ser exibido. | String | 'fas fa-spinner fa-spin' |
| severity | Severidade do botão ('primary', 'secondary', 'tertiary', 'danger'). | String | 'primary' |
| size | Tamanho do botão ('sm', 'md', 'lg'). | String | 'md' |
| fluid | Indica se o botão deve ocupar toda a largura do contêiner. | Boolean | false |
Slots
| Nome | Descrição |
|---|---|
| default | Conteúdo personalizado para o rótulo do botão. |
| loading-content | Conteúdo personalizado para o loading do botão. |
| icon-left | Conteúdo personalizado para o icone da esquerda. Nota: As propriedades que impactam o icone não terão efeito caso use o slot. |
| icon-right | Conteúdo personalizado para o icone da direita. Nota: As propriedades que impactam o icone não terão efeito caso use o slot. |
Atributos
Qualquer atributo que você passar para o componente LxButton são herdados diretamente pelo button.
Exemplo de Uso
Veja um exemplo de como passar um atributo personalizado para o botão:
Clique para visualizar o código
vue
<template>
<LxButton
label="Clique Aqui"
:disabled="true"
/>
</template>Classes Padrão
O componente LxButton utiliza uma série de classes CSS padrão que podem ser personalizadas. Essas classes permitem que você estilize qualquer parte do botão usando ::v-deep com a classe desejada.
| Nome | Descrição |
|---|---|
| lx-button | Classe base do botão. |
| lx-button-icon | Classe do ícone do botão. |
| lx-button-label | Classe do rótulo do botão. |
Exemplo de Personalização
Você pode personalizar o estilo do botão utilizando as classes padrão com o seletor ::v-deep. Veja um exemplo de como alterar o estilo do rótulo do botão:
Clique para visualizar o código
css
::v-deep .lx-button-label {
color: red;
}