Botón

Botón de uso habitual, con varios tipos, tamaños, estados y colores temáticos del estilo chino.

Uso básico

Uso básico

import { LhButton } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhButton>Botón predeterminado</LhButton>
      <LhButton type="primary">Botón principal</LhButton>
      <LhButton type="success">Botón de éxito</LhButton>
      <LhButton type="warning">Botón de aviso</LhButton>
      <LhButton type="danger">Botón de peligro</LhButton>
      <LhButton type="info">Botón informativo</LhButton>
    </>
  )
}

Tamaño y estado

Tamaño y estado

import { LhButton } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhButton size="large">Botón grande</LhButton>
      <LhButton>Botón predeterminado</LhButton>
      <LhButton size="small">Botón pequeño</LhButton>

      <LhButton type="primary" loading>Cargando</LhButton>
      <LhButton type="primary" disabled>Desactivado</LhButton>
      <LhButton type="primary" icon="search">Botón con icono</LhButton>
      <LhButton type="primary" round>Botón redondeado</LhButton>
      <LhButton type="primary" plain>Botón plano</LhButton>
    </>
  )
}

Button Props

Prop	Descripción	Tipo	Valores permitidos	Predeterminado
type	Tipo de botón	'text' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	—	'text'
size	Tamaño	'large' | 'middle' | 'small'	—	Sigue ConfigProvider
loading	Estado de carga	boolean	—	false
disabled	Estado desactivado	boolean	—	false
plain	Variante plana	boolean	—	false
block	Bloque a ancho completo (100%)	boolean	—	false
round	Esquinas redondeadas	boolean	—	false
circle	Forma circular	boolean	—	false
icon	Nombre del icono	LhIconName	—	—
nativeType	Atributo type nativo	'button' | 'submit' | 'reset'	—	'button'
href	Si se pasa, se renderiza como <a>	string	—	—
target	target del modo href	string	—	—
themeVars	Variables de tema a nivel de componente	Record<string, string>	—	—
bgPattern	Patrón de fondo a nivel de componente	string	—	—
sx	Props rápidas de layout	SxProps	—	—

Eventos de Button

Evento	Descripción	Firma del callback	Equivalente en Vue
onClick	Se dispara al hacer clic (no se dispara con disabled / loading)	(event: MouseEvent) => void	@click

Estilos

import '@lh-ui/react/style/button'