Composant Button personnalisable avec variantes, tailles, état de chargement et support d'icônes.

Bouton

ScaleRocket Mobile inclut un composant Button flexible qui remplace le TouchableOpacity par défaut de React Native avec un style cohérent et des états de chargement intégrés.

Utilisation de base

import { Button } from "@/components/ui/Button";

export default function MyScreen() {
  return (
    <Button title="Get Started" onPress={() => console.log("pressed")} />
  );
}

Variantes

Le Button supporte plusieurs variantes visuelles :

<Button title="Primary" variant="primary" onPress={handlePress} />
<Button title="Secondary" variant="secondary" onPress={handlePress} />
<Button title="Outline" variant="outline" onPress={handlePress} />
<Button title="Ghost" variant="ghost" onPress={handlePress} />
<Button title="Destructive" variant="destructive" onPress={handlePress} />

Variante	Cas d'usage
`primary`	Actions principales (soumettre, continuer)
`secondary`	Actions secondaires (annuler, retour)
`outline`	Actions tertiaires avec bordure
`ghost`	Style minimal pour actions en ligne
`destructive`	Actions dangereuses (supprimer, retirer)

Tailles

Trois tailles intégrées contrôlent le padding et la taille de police :

<Button title="Small" size="sm" onPress={handlePress} />
<Button title="Medium" size="md" onPress={handlePress} />
<Button title="Large" size="lg" onPress={handlePress} />

État de chargement

Passez loading={true} pour afficher un spinner et désactiver l'interaction :

const [loading, setLoading] = useState(false);

<Button
  title="Save"
  loading={loading}
  onPress={async () => {
    setLoading(true);
    await saveData();
    setLoading(false);
  }}
/>

En chargement, le bouton automatiquement :

Remplace le texte par un ActivityIndicator
Désactive les événements tactiles
Réduit l'opacité

Boutons avec icônes

Ajoutez une icône avant ou après le libellé :

import { Ionicons } from "@expo/vector-icons";

<Button
  title="Add Item"
  icon={<Ionicons name="add" size={18} color="white" />}
  onPress={handlePress}
/>

<Button
  title="Next"
  iconRight={<Ionicons name="arrow-forward" size={18} color="white" />}
  onPress={handlePress}
/>

Pleine largeur

Par défaut les boutons sont en largeur auto. Utilisez fullWidth pour les actions de formulaire :

<Button title="Sign In" fullWidth onPress={handleSignIn} />

Personnalisation

Surchargez les styles via les props style et textStyle :

<Button
  title="Custom"
  style={{ backgroundColor: "#8B5CF6", borderRadius: 12 }}
  textStyle={{ fontWeight: "700", fontSize: 16 }}
  onPress={handlePress}
/>

État désactivé

<Button title="Submit" disabled={!isValid} onPress={handleSubmit} />

L'état désactivé réduit l'opacité à 0.5 et empêche les événements tactiles.

Props du composant

Prop	Type	Défaut	Description
`title`	`string`	requis	Libellé du bouton
`variant`	`string`	`"primary"`	Variante visuelle
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Taille du bouton
`loading`	`boolean`	`false`	Afficher le spinner
`disabled`	`boolean`	`false`	Désactiver l'interaction
`fullWidth`	`boolean`	`false`	Étendre à la largeur du conteneur
`icon`	`ReactNode`	—	Icône à gauche
`iconRight`	`ReactNode`	—	Icône à droite

Bouton

On this page