Botón

Componente de botón: admite varios tipos, tamaños, estados y la paleta temática de estilo chino.

Uso básico

vue

<script setup lang="ts">
</script>

<template>
  <!-- Predeterminado -->
  <LhButton>Predeterminado</LhButton>
  <!-- primary -->
  <LhButton type="primary">Principal</LhButton>
  <!-- success -->
  <LhButton type="success">Éxito</LhButton>
  <!-- warning -->
  <LhButton type="warning">Aviso</LhButton>
  <!-- danger -->
  <LhButton type="danger">Peligro</LhButton>
  <!-- info -->
  <LhButton type="info">Información</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Predeterminado -->
  <LhButton>Predeterminado</LhButton>
  <!-- primary -->
  <LhButton type="primary">Principal</LhButton>
  <!-- success -->
  <LhButton type="success">Éxito</LhButton>
  <!-- warning -->
  <LhButton type="warning">Aviso</LhButton>
  <!-- danger -->
  <LhButton type="danger">Peligro</LhButton>
  <!-- info -->
  <LhButton type="info">Información</LhButton>
</template>

Diferentes tamaños

vue

<script setup lang="ts">
</script>

<template>
  <LhButton size="large">Botón grande</LhButton>
  <LhButton>Predeterminado</LhButton>
  <LhButton size="small">Botón pequeño</LhButton>
  <LhButton size="mini">Botón mini</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton size="large">Botón grande</LhButton>
  <LhButton>Predeterminado</LhButton>
  <LhButton size="small">Botón pequeño</LhButton>
  <LhButton size="mini">Botón mini</LhButton>
</template>

Botón plano

vue

<script setup lang="ts">
</script>

<template>
  <LhButton plain>Botón plano</LhButton>
  <LhButton type="primary" plain>Principal</LhButton>
  <LhButton type="success" plain>Éxito</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton plain>Botón plano</LhButton>
  <LhButton type="primary" plain>Principal</LhButton>
  <LhButton type="success" plain>Éxito</LhButton>
</template>

Botón circular

vue

<script setup lang="ts">
</script>

<template>
  <LhButton circle>Redondo</LhButton>
  <LhButton type="primary" circle>Pri</LhButton>
  <LhButton type="success" circle>Éxi</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton circle>Redondo</LhButton>
  <LhButton type="primary" circle>Pri</LhButton>
  <LhButton type="success" circle>Éxi</LhButton>
</template>

Estado de carga

vue

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

const loading1 = ref(false)
</script>

<template>
  <!-- Cargar al hacer clic -->
  <LhButton :loading="loading1" @click="loading1 = true">Cargar al hacer clic</LhButton>
  <!-- Cargando -->
  <LhButton type="primary" loading>Cargando</LhButton>
</template>

vue

<script>
export default {
  data() {
    return { loading1: false }
  },
}
</script>

<template>
  <!-- Cargar al hacer clic -->
  <LhButton :loading="loading1" @click="loading1 = true">Cargar al hacer clic</LhButton>
  <!-- Cargando -->
  <LhButton type="primary" loading>Cargando</LhButton>
</template>

Estado deshabilitado

vue

<script setup lang="ts">
</script>

<template>
  <LhButton disabled>Botón deshabilitado</LhButton>
  <LhButton type="primary" disabled>Principal</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton disabled>Botón deshabilitado</LhButton>
  <LhButton type="primary" disabled>Principal</LhButton>
</template>

Botón Block

vue

<script setup lang="ts">
</script>

<template>
  <!-- Botón de bloque -->
  <LhButton block>Botón de bloque</LhButton>
  <!-- Bloque principal -->
  <LhButton type="primary" block>Bloque principal</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Botón de bloque -->
  <LhButton block>Botón de bloque</LhButton>
  <!-- Bloque principal -->
  <LhButton type="primary" block>Bloque principal</LhButton>
</template>

Botón redondeado

round aporta una forma de cápsula con bordes muy redondeados (distinta del círculo completo de circle).

vue

<script setup lang="ts">
</script>

<template>
  <LhButton round>Botón redondeado</LhButton>
  <LhButton type="primary" round>Redondeado principal</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton round>Botón redondeado</LhButton>
  <LhButton type="primary" round>Redondeado principal</LhButton>
</template>

Botón con icono

icon admite el nombre del icono; también puede usarse el slot #icon para un renderizado personalizado.

vue

<script setup lang="ts">
</script>

<template>
  <!-- Buscar -->
  <LhButton icon="search">Buscar</LhButton>
  <!-- Favorito -->
  <LhButton type="primary" icon="star">Favorito</LhButton>
  <!-- Slot de icono personalizado -->
  <LhButton circle>
    <template #icon>🔍</template>
  </LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Buscar -->
  <LhButton icon="search">Buscar</LhButton>
  <!-- Favorito -->
  <LhButton type="primary" icon="star">Favorito</LhButton>
  <!-- Slot de icono personalizado -->
  <LhButton circle>
    <template #icon>🔍</template>
  </LhButton>
</template>

Botón enlace

Si se establece href, se renderiza como etiqueta <a> y target controla cómo se abre; si no se establece href, native-type determina el tipo de button nativo.

GitHub

vue

<script setup lang="ts">
</script>

<template>
  <LhButton href="https://github.com/lhgb-top/lh-ui-plus" target="_blank">GitHub</LhButton>
  <LhButton native-type="submit" type="primary">Enviar</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton href="https://github.com/lhgb-top/lh-ui-plus" target="_blank">GitHub</LhButton>
  <LhButton native-type="submit" type="primary">Enviar</LhButton>
</template>

Disposición rápida con sx

Con la prop sx puoi establecer rápidamente márgenes y tamaños sin escribir CSS adicional.

vue

<script setup lang="ts">
</script>

<template>
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">Margen superior 2, márgenes horizontales 1</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">Margen superior 2, márgenes horizontales 1</LhButton>
</template>

sx se basa en una unidad de 8px: mt: 2 → marginTop: 16px, mx: 1 → marginLeft: 8px; marginRight: 8px. Para ver todas las propiedades, consulta Diseño rápido con sx.

Tema personalizado

Aplica al botón una paleta temática personalizada sobrescribiendo variables CSS mediante la prop themeVars de LhConfigProvider.

vue

<script setup lang="ts">
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
  'bg-color': '#F0F4F8',
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- Botón de porcelana azul y blanco -->
    <LhButton type="primary">Botón de porcelana azul y blanco</LhButton>
    <!-- Éxito -->
    <LhButton type="success">Éxito</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
  data() {
    return {
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
        'bg-color': '#F0F4F8',
      },
    }
  },
}
</script>

<template>
  <LhConfigProvider :theme-vars="cerblueTheme">
    <!-- Botón de porcelana azul y blanco -->
    <LhButton type="primary">Botón de porcelana azul y blanco</LhButton>
    <!-- Éxito -->
    <LhButton type="success">Éxito</LhButton>
  </LhConfigProvider>
</template>

Para más temas, consulta Personalización del tema.

Internacionalización

El texto del botón puede internacionalizarse con LhConfigProvider y un paquete de idioma.

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhButton, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
</script>

<template>
  <LhConfigProvider :locale="messages">
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhButton, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhButton },
  data() {
    return { locale: 'zh-CN' }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
}
</script>

<template>
  <LhConfigProvider :locale="messages">
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换至英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

Button API

Props

Prop	Descripción	Tipo	Predeterminado
type	Tipo de botón	`"success" \| "warning" \| "error" \| "info" \| "danger" \| "default" \| "primary"`	`LH_BUTTON_TYPE_CONST.default`
size	Tamaño del botón; si no se pasa, se hereda del ConfigProvider	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	—
loading	Estado de carga	`boolean`	`false`
disabled	Estado deshabilitado	`boolean`	`false`
plain	Si es un botón plano	`boolean`	`false`
block	Si es de bloque	`boolean`	`false`
round	Si es un botón redondeado	`boolean`	`false`
circle	Si es un botón circular	`boolean`	`false`
icon	Nombre del icono (iconos integrados de LhIcon, p. ej. `search`; para un renderizado personalizado, sobrescribe con el slot icon)	`LhIconName`	—
nativeType	Tipo de button nativo (solo surte efecto si no se pasa `href`)	`"button" \| "submit" \| "reset"`	`'button'`
href	Dirección del enlace (si se pasa, se renderiza como `<a>` en lugar de `<button>`)	`string`	`''`
target	Cómo se abre el enlace	`string`	`'_self'`
themeVars	Variables de tema a nivel de componente; sobrescribe la configuración del ConfigProvider	`{ [x: string]: string; }`	—
bgPattern	Patrón de fondo a nivel de componente; sobrescribe la configuración del ConfigProvider	`string`	—
sx	Props de disposición rápida	`LhSxProps`	—

Events

Evento	Descripción	Parámetros de la retrollamada
click	Evento de clic	`(event: MouseEvent)`

Slots

Slot	Descripción
default	Contenido del botón
icon	Renderizado de icono personalizado (sobrescribe el `LhIcon` por defecto de la prop `icon`)

Accesibilidad

Anillo de foco por teclado: el elemento raíz proporciona de forma uniforme un anillo de foco :focus-visible (visible en la navegación por teclado, no al hacer clic con el ratón), coloreado con la variable de tema --lh-primary-color y con seguimiento automático del modo claro/oscuro, sin configuración adicional
Nombre de los botones de icono: cuando el botón solo tiene icono y no texto (p. ej., botones circulares de icono), el lector de pantalla no puede deducir su propósito, por lo que es obligatorio pasar aria-label; este atributo se transmite automáticamente al elemento raíz. La prop icon admite directamente el nombre de un icono integrado (p. ej. icon="search"); para un renderizado personalizado más allá del icono, usa el slot icon:
vue
```
<LhButton circle aria-label="Buscar">
  <template #icon>
    <LhIcon name="search" />
  </template>
</LhButton>
```
Degradación de la animación: la animación de carga respeta el ajuste prefers-reduced-motion del sistema (si se reducen los efectos de movimiento, se detiene el giro)

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/button/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhButtonProps

export interface LhButtonProps {
  type?: LhButtonType
  /** Tamaño, opcional. Si no se pasa, se hereda del ConfigProvider */
  size?: LhButtonSize
  loading?: boolean
  disabled?: boolean
  plain?: boolean
  block?: boolean
  round?: boolean
  circle?: boolean
  /** Nombre del icono (iconos integrados de LhIcon, p. ej. `search`; para un renderizado personalizado, sobrescribe con el slot icon) */
  icon?: LhIconName
  nativeType?: 'button' | 'submit' | 'reset'
  href?: string
  target?: string
  /** Variables de tema a nivel de componente; sobrescriben los themeVars globales y componentTheme del ConfigProvider */
  themeVars?: Record<string, string>
  /** Patrón de fondo a nivel de componente; sobrescribe la configuración del ConfigProvider (sin restricción de la lista blanca patternComponents) */
  bgPattern?: string
  /** Props de disposición rápida */
  sx?: LhSxProps
}

LhButtonType

export type LhButtonType = (typeof LH_BUTTON_TYPE_CONST)[keyof typeof LH_BUTTON_TYPE_CONST]

LhButtonSize

export type LhButtonSize = (typeof LH_BUTTON_SIZE_CONST)[keyof typeof LH_BUTTON_SIZE_CONST]

LhIconName _{(de @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

Botón ​

Uso básico ​

Diferentes tamaños ​

Botón plano ​

Botón circular ​

Estado de carga ​

Estado deshabilitado ​

Botón Block ​

Botón redondeado ​

Botón con icono ​

Botón enlace ​

Disposición rápida con sx ​

Tema personalizado ​

Internacionalización ​

Button API ​

Props ​

Events ​

Slots ​

Accesibilidad ​

Definiciones de tipos ​