Bouton

Bouton d'action courant, prenant en charge plusieurs types, tailles, états et couleurs de thème style chinois.

Utilisation de base

Utilisation de base

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

export default function Demo() {
  return (
    <>
      <LhButton>Par défaut</LhButton>
      <LhButton type="primary">Principal</LhButton>
      <LhButton type="success">Succès</LhButton>
      <LhButton type="warning">Avertissement</LhButton>
      <LhButton type="danger">Danger</LhButton>
      <LhButton type="info">Information</LhButton>
    </>
  )
}

Tailles et états

Tailles et états

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

export default function Demo() {
  return (
    <>
      <LhButton size="large">Grand</LhButton>
      <LhButton>Par défaut</LhButton>
      <LhButton size="small">Petit</LhButton>

      <LhButton type="primary" loading>Chargement</LhButton>
      <LhButton type="primary" disabled>Désactivé</LhButton>
      <LhButton type="primary" icon="search">Icône</LhButton>
      <LhButton type="primary" round>Arrondi</LhButton>
      <LhButton type="primary" plain>Plain</LhButton>
    </>
  )
}

Button Props

Prop	Description	Type	Options	Valeur par défaut
type	Type de bouton	'text' | 'primary' | 'success' | 'warning' | 'danger' | 'info'	—	'text'
size	Taille	'large' | 'middle' | 'small'	—	Selon ConfigProvider
loading	État de chargement	boolean	—	false
disabled	État désactivé	boolean	—	false
plain	Variante plain	boolean	—	false
block	Pleine largeur (width 100%)	boolean	—	false
round	Coins arrondis	boolean	—	false
circle	Circulaire	boolean	—	false
icon	Nom de l'icône	LhIconName	—	—
nativeType	Attribut type natif	'button' | 'submit' | 'reset'	—	'button'
href	Rendu sous forme de <a> lorsqu'il est fourni	string	—	—
target	target en mode href	string	—	—
themeVars	Variables de thème au niveau du composant	Record<string, string>	—	—
bgPattern	Motif de fond au niveau du composant	string	—	—
sx	Raccourci de mise en page	SxProps	—	—

Événements de Button

Événement	Description	Signature du rappel	Équivalent Vue
onClick	Déclenché au clic (pas déclenché à l'état désactivé / en chargement)	(event: MouseEvent) => void	@click

Styles

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