Bouton

Composant de bouton, prenant en charge plusieurs types, tailles, états ainsi que les couleurs thématiques du style Guofeng (style traditionnel chinois).

Utilisation de base

vue

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

<template>
  <!-- Par défaut -->
  <LhButton>Bouton par défaut</LhButton>
  <!-- primary -->
  <LhButton type="primary">Bouton principal</LhButton>
  <!-- success -->
  <LhButton type="success">Bouton succès</LhButton>
  <!-- warning -->
  <LhButton type="warning">Bouton avertissement</LhButton>
  <!-- danger -->
  <LhButton type="danger">Bouton danger</LhButton>
  <!-- info -->
  <LhButton type="info">Bouton d'information</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Par défaut -->
  <LhButton>Bouton par défaut</LhButton>
  <!-- primary -->
  <LhButton type="primary">Bouton principal</LhButton>
  <!-- success -->
  <LhButton type="success">Bouton succès</LhButton>
  <!-- warning -->
  <LhButton type="warning">Bouton avertissement</LhButton>
  <!-- danger -->
  <LhButton type="danger">Bouton danger</LhButton>
  <!-- info -->
  <LhButton type="info">Bouton d'information</LhButton>
</template>

Différentes tailles

vue

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

<template>
  <LhButton size="large">Grand bouton</LhButton>
  <LhButton>Bouton par défaut</LhButton>
  <LhButton size="small">Petit bouton</LhButton>
  <LhButton size="mini">Bouton mini</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton size="large">Grand bouton</LhButton>
  <LhButton>Bouton par défaut</LhButton>
  <LhButton size="small">Petit bouton</LhButton>
  <LhButton size="mini">Bouton mini</LhButton>
</template>

Bouton épuré

vue

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

<template>
  <LhButton plain>Bouton épuré</LhButton>
  <LhButton type="primary" plain>Bouton principal</LhButton>
  <LhButton type="success" plain>Bouton succès</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton plain>Bouton épuré</LhButton>
  <LhButton type="primary" plain>Bouton principal</LhButton>
  <LhButton type="success" plain>Bouton succès</LhButton>
</template>

Bouton circulaire

vue

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

<template>
  <LhButton circle>R</LhButton>
  <LhButton type="primary" circle>P</LhButton>
  <LhButton type="success" circle>S</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton circle>R</LhButton>
  <LhButton type="primary" circle>P</LhButton>
  <LhButton type="success" circle>S</LhButton>
</template>

État de chargement

vue

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

const loading1 = ref(false)
</script>

<template>
  <!-- Chargement au clic -->
  <LhButton :loading="loading1" @click="loading1 = true">Chargement au clic</LhButton>
  <!-- Chargement en cours -->
  <LhButton type="primary" loading>Chargement…</LhButton>
</template>

vue

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

<template>
  <!-- Chargement au clic -->
  <LhButton :loading="loading1" @click="loading1 = true">Chargement au clic</LhButton>
  <!-- Chargement en cours -->
  <LhButton type="primary" loading>Chargement…</LhButton>
</template>

État désactivé

vue

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

<template>
  <LhButton disabled>Bouton désactivé</LhButton>
  <LhButton type="primary" disabled>Bouton principal</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton disabled>Bouton désactivé</LhButton>
  <LhButton type="primary" disabled>Bouton principal</LhButton>
</template>

Bouton bloc

vue

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

<template>
  <!-- Bouton bloc -->
  <LhButton block>Bouton bloc</LhButton>
  <!-- Bouton bloc principal -->
  <LhButton type="primary" block>Bouton bloc principal</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Bouton bloc -->
  <LhButton block>Bouton bloc</LhButton>
  <!-- Bouton bloc principal -->
  <LhButton type="primary" block>Bouton bloc principal</LhButton>
</template>

Bouton arrondi

round offre une forme en capsule à grand rayon (différente du cercle complet de circle).

vue

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

<template>
  <LhButton round>Bouton arrondi</LhButton>
  <LhButton type="primary" round>Bouton arrondi principal</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton round>Bouton arrondi</LhButton>
  <LhButton type="primary" round>Bouton arrondi principal</LhButton>
</template>

Bouton avec icône

icon accepte un nom d'icône ; le slot #icon permet également un rendu personnalisé.

vue

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

<template>
  <!-- Rechercher -->
  <LhButton icon="search">Rechercher</LhButton>
  <!-- Favoris -->
  <LhButton type="primary" icon="star">Favoris</LhButton>
  <!-- Slot d'icône personnalisé -->
  <LhButton circle>
    <template #icon>🔍</template>
  </LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Rechercher -->
  <LhButton icon="search">Rechercher</LhButton>
  <!-- Favoris -->
  <LhButton type="primary" icon="star">Favoris</LhButton>
  <!-- Slot d'icône personnalisé -->
  <LhButton circle>
    <template #icon>🔍</template>
  </LhButton>
</template>

Bouton lien

Avec href, le bouton est rendu en balise <a> et target contrôle le mode d'ouverture ; sans href, native-type détermine le type de bouton natif.

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">Valider</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">Valider</LhButton>
</template>

Mise en page rapide sx

La prop sx permet de définir rapidement les espacements et les dimensions, sans écrire de CSS supplémentaire.

vue

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

<template>
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">Marge supérieure 2, marges horizontales 1</LhButton>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhButton type="primary" :sx="{ mt: 2, mx: 1 }">Marge supérieure 2, marges horizontales 1</LhButton>
</template>

sx repose sur une base de 8px : mt: 2 → marginTop: 16px, mx: 1 → marginLeft: 8px; marginRight: 8px. Pour la liste complète des propriétés, voir Mise en page sx rapide.

Personnalisation du thème

Appliquez des couleurs thème personnalisées au bouton en surchargeant les variables CSS via la propriété 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">
    <!-- Bouton en porcelaine bleue et blanche -->
    <LhButton type="primary">Bouton en porcelaine bleue et blanche</LhButton>
    <!-- Succès -->
    <LhButton type="success">Succès</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">
    <!-- Bouton en porcelaine bleue et blanche -->
    <LhButton type="primary">Bouton en porcelaine bleue et blanche</LhButton>
    <!-- Succès -->
    <LhButton type="success">Succès</LhButton>
  </LhConfigProvider>
</template>

Pour aller plus loin, voir Personnalisation du thème.

Internationalisation

Le texte du bouton peut être internationalisé au moyen de LhConfigProvider et des packs de langue.

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

Propriété	Description	Type	Valeur par défaut
type	Type de bouton	`"success" \| "warning" \| "error" \| "info" \| "danger" \| "default" \| "primary"`	`LH_BUTTON_TYPE_CONST.default`
size	Taille du bouton, héritée de ConfigProvider si non renseignée	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	—
loading	État de chargement	`boolean`	`false`
disabled	État désactivé	`boolean`	`false`
plain	Bouton épuré	`boolean`	`false`
block	Bouton bloc	`boolean`	`false`
round	Bouton arrondi	`boolean`	`false`
circle	Bouton circulaire	`boolean`	`false`
icon	Nom d'icône (icône intégrée LhIcon, par exemple `search` ; pour un rendu personnalisé, utilisez le slot `icon`)	`LhIconName`	—
nativeType	Type de bouton natif (uniquement sans `href`)	`"button" \| "submit" \| "reset"`	`'button'`
href	Adresse du lien (rendu en `<a>` plutôt qu'en `<button>` si renseignée)	`string`	`''`
target	Mode d'ouverture du lien	`string`	`'_self'`
themeVars	Variables de thème au niveau du composant, surchargeant la configuration de ConfigProvider	`{ [x: string]: string; }`	—
bgPattern	Motif d'arrière-plan au niveau du composant, surchargeant la configuration de ConfigProvider	`string`	—
sx	Propriétés de mise en page rapide sx	`LhSxProps`	—

Events

Événement	Description	Paramètre de rappel
click	Événement de clic	`(event: MouseEvent)`

Slots

Slot	Description
default	Contenu du bouton
icon	Rendu d'icône personnalisé (remplace le `LhIcon` par défaut de la prop `icon`)

Accessibilité

Anneau de focus clavier : l'élément racine fournit un anneau de focus via :focus-visible (affiché lors de la navigation clavier, masqué au clic souris), coloré par la variable de thème --lh-primary-color, suivant automatiquement les modes clair/sombre, sans configuration supplémentaire
Nommage des boutons à icône : lorsqu'un bouton ne contient qu'une icône sans texte (bouton circulaire à icône, par exemple), les lecteurs d'écran ne peuvent pas en déduire la fonction ; un aria-label est alors obligatoire et est automatiquement transmis à l'élément racine. La prop icon accepte directement un nom d'icône intégrée (par exemple icon="search") ; pour un rendu autre qu'une icône, utilisez le slot icon :
vue
```
<LhButton circle aria-label="Rechercher">
  <template #icon>
    <LhIcon name="search" />
  </template>
</LhButton>
```
Réduction des animations : l'animation de chargement respecte le paramètre système prefers-reduced-motion (la rotation est désactivée lorsque les effets animés sont réduits)

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/button/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhButtonProps

export interface LhButtonProps {
  type?: LhButtonType
  /** Taille, facultative. Si elle n'est pas renseignée, elle est héritée de ConfigProvider */
  size?: LhButtonSize
  loading?: boolean
  disabled?: boolean
  plain?: boolean
  block?: boolean
  round?: boolean
  circle?: boolean
  /** Nom d'icône (icône intégrée LhIcon, par exemple `search` ; pour un rendu personnalisé, utilisez le slot `icon`) */
  icon?: LhIconName
  nativeType?: 'button' | 'submit' | 'reset'
  href?: string
  target?: string
  /** Variables de thème au niveau du composant, surchargeant les themeVars et componentTheme globaux de ConfigProvider */
  themeVars?: Record<string, string>
  /** Motif d'arrière-plan au niveau du composant, surchargeant la configuration de ConfigProvider (non soumis à la liste blanche patternComponents) */
  bgPattern?: string
  /** Propriétés de mise en page rapide sx */
  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 _{(provient de @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

Bouton ​

Utilisation de base ​

Différentes tailles ​

Bouton épuré ​

Bouton circulaire ​

État de chargement ​

État désactivé ​

Bouton bloc ​

Bouton arrondi ​

Bouton avec icône ​

Bouton lien ​

Mise en page rapide sx ​

Personnalisation du thème ​

Internationalisation ​

Button API ​

Props ​

Events ​

Slots ​

Accessibilité ​

Définitions de types ​