asChild n’est pas disponible sur tous les composants. Il est proposé uniquement lorsque le contrôle peut transmettre son comportement et son accessibilité à un enfant unique de façon sûre. Button prend en charge cette composition :

import { Button } from "@liquidify/react"

export function DocumentationLink() {
  return (
    <Button asChild variant="glass">
      <a href="/docs">Read the documentation</a>
    </Button>
  )
}

L’enfant détermine la sémantique de l’élément. Fournissez exactement un élément et vérifiez le clavier. Les composants incompatibles avec asChild le refusent au niveau des types.

La ref pointe vers la racine native, ou vers l’enfant fusionné lorsque asChild est utilisé :

import { useRef } from "react"
import { Button } from "@liquidify/react"

export function FocusExample() {
  const buttonRef = useRef<HTMLButtonElement>(null)
  return <Button ref={buttonRef}>Continue</Button>
}

Les composants qui produisent leurs propres libellés utilisent Text. Personnalisez leur typographie avec labelProps, sans ajouter de nœuds stylisés. Cette API accepte variant, weight, color, tint, tracking, transform, italic, lineHeight et wrap. Vos valeurs remplacent celles du composant.

import { Toggle } from "@liquidify/react"

export function EmphasisedLabel() {
  return (
    <Toggle labelProps={{ variant: "headline", color: "secondary" }} defaultChecked>
      Wi-Fi
    </Toggle>
  )
}

Si vous passez un élément Text, Icon ou un autre nœud comme libellé, le composant le conserve sans l’envelopper à nouveau.

onPress s’exécute une fois par activation, à la souris, au toucher ou au clavier. Il ne reçoit aucun argument. Les contrôles avec valeur utilisent onChange : Toggle fournit un boolean, Slider un number, et TextField et Picker un string.

import { Button } from "@liquidify/react"

export function SaveAction({ onSave }: { onSave: () => void }) {
  return (
    <Button variant="borderedProminent" onPress={onSave}>
      Enregistrer
    </Button>
  )
}

Button affiche <button type="button">. Lancez l’action depuis onPress ; ne comptez pas sur l’envoi natif implicite du formulaire.

Certaines API comprennent une racine avec des parties nommées ou des listes d’éléments. Respectez la structure documentée et utilisez des identifiants stables pour les menus, actions, onglets et autres collections.