Componente Button

El componente Button te permite crear botones personalizados con diversas propiedades y estilos. Puedes utilizarlo para enriquecer la experiencia de usuario en tu aplicación.

Uso en Componentes

Utilizando en una Vista

Puedes usar el componente Button en tus vistas de la siguiente manera:

<template>
  <CButton
    text="Guardar"
    background="bg-success"
    textColor="text-white"
    size="md"
    @click="guardarDatos"
  />
</template>

Utilizando en Otro Componente

Si deseas utilizar el componente Button en otro componente, asegúrate de importarlo y agregarlo a tu plantilla:

<template>
  <CButton
    text="Salir"
    background="bg-danger"
    textColor="text-white"
    size="sm"
    :loading="isLoading"
    :disabled="isDisabled"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isLoading = ref(false);
const isDisabled = ref(false);

</script>

Propiedades

Propiedad	Tipo	Valor por defecto	Descripción
text	String	''	Define el texto del botón.
background	String	''	Establece el color de fondo del botón.
textColor	String	''	Define el color del texto del botón.
customClass	String	'px-2'	Agrega clases de estilo personalizadas al botón.
type	String	'submit'	Establece el tipo de botón (por ejemplo, "submit", "button", etc.).
size	String	'md'	Define el tamaño del botón (por ejemplo, "sm", "md", "lg").
rounded	String	'md'	Establece el nivel de redondeo de las esquinas del botón.
href	String	''	Especifica la URL a abrir con window.open cuando se hace clic.
icon	String	''	Define la ruta de la imagen del ícono del botón.
iconLeft	String	''	Define la ruta de la imagen del ícono izquierdo del botón.
to	Object		Especifica el objeto de ruta a navegar al hacer clic en el botón.
loading	Boolean	false	Indica si el botón está en estado de carga.
disabled	Boolean	false	Deshabilita el botón.