Button

Les boutons sont des éléments d’interface interactifs qui permettent aux utilisateurs de déclencher des actions ou événements spécifiques dans une application. Ils jouent un rôle crucial dans les interfaces utilisateur, offrant un signal visuel pour les actions initiées par l’utilisateur. Les boutons peuvent être utilisés dans divers contextes, notamment des formulaires pour la soumission, des dialogues pour la confirmation, et des barres d’outils pour un accès rapide aux fonctions et fonctionnalités.

Taille

La prop size peut être utilisée pour changer la taille du bouton.

Les boutons sont disponibles en trois tailles : small, medium, large, xl et 2xl.

import React from "react";
import { Button } from "@firecms/ui";

export default function ButtonSizeDemo() {
    return (
        <div className={"flex flex-row gap-4 items-center justify-center"}>
            <Button
                size={"small"}
                onClick={() => console.log("Button clicked")}>
                Small
            </Button>
            <Button onClick={() => console.log("Button clicked")}>
                Medium
            </Button>
            <Button
                size={"large"}
                onClick={() => console.log("Button clicked")}>
                Large
            </Button>
            <Button
                size={"xl"}
                onClick={() => console.log("Button clicked")}>
                XLarge
            </Button>
            <Button
                size={"2xl"}
                onClick={() => console.log("Button clicked")}>
                XXLarge
            </Button>
        </div>
    );
}

Variante

La prop variant change le style du bouton. Les valeurs possibles sont filled, outlined et text.

import React from "react";
import { Button } from "@firecms/ui";

export default function VariantButtonDemo() {
    return (
        <div className={"flex flex-row gap-4 items-center justify-center"}>
            <Button variant="filled">
                Filled Button
            </Button>
            <Button color="neutral">
                Neutral Button
            </Button>
            <Button variant="outlined">
                Outlined Button
            </Button>
            <Button variant="text">
                Text Button
            </Button>
        </div>
    );
}

Couleur

La prop color définit le thème de couleur du bouton. Les valeurs possibles sont primary, secondary, text, error et neutral.

import React from "react";
import { Button } from "@firecms/ui";

export default function ButtonColorDemo() {
    return (
        <div className={"flex flex-row gap-4 items-center justify-center"}>
            <Button color="primary">
                Primary
            </Button>
            <Button color="secondary">
                Secondary
            </Button>
            <Button color="text">
                Text
            </Button>
            <Button color="error">
                Error
            </Button>
            <Button color="neutral">
                Neutral
            </Button>
        </div>
    );
}

Désactivé

Définir disabled à true désactive le bouton, empêchant les interactions.

import React from "react";
import { Button } from "@firecms/ui";

export default function DisabledButtonDemo() {
    return (
        <div className={"flex flex-row gap-4 items-center justify-center"}>
            <Button disabled>
                Disabled Button
            </Button>
        </div>
    );
}

Icône de début

La prop startIcon vous permet d’inclure une icône avant le contenu du bouton.

import React from "react";
import { AddIcon, Button } from "@firecms/ui";

export default function StartIconButtonDemo() {
    return (
        <div className={"flex flex-row gap-4 items-center justify-center"}>
            <Button startIcon={<AddIcon/>}>
                Button with Icon
            </Button>
        </div>
    );
}

Pleine largeur

La prop fullWidth fait que le bouton s’étend pour occuper toute la largeur de son conteneur.

import React from "react";
import { Button } from "@firecms/ui";

export default function FullWidthButtonDemo() {
    return (
        <Button fullWidth>
            Full Width Button
        </Button>
    );
}

Classe personnalisée

La prop className vous permet de passer des classes CSS personnalisées au composant bouton.

import React from "react";
import { Button } from "@firecms/ui";

export default function CustomClassNameButtonDemo() {
    return (
        <div className={"flex flex-row gap-4 items-center justify-center"}>
            <Button className="bg-red-500 hover:bg-red-600 border-red-600 hover:ring-red-600">
                Button with Custom Class
            </Button>
        </div>
    )
}

Props du composant Button

• variant : Définit la variante de style du bouton. Options : "filled", "outlined" ou "text". Défaut : "filled".
• disabled : Désactive le bouton, empêchant l’interaction utilisateur. Défaut : false.
• color : Définit le thème de couleur du bouton. Options : "primary", "secondary", "neutral", "text" ou "error".
• size : Spécifie la taille du bouton. Options : "small", "medium", "large", "xl" ou "2xl". Défaut : "medium".
• startIcon : Ajoute une icône au début du contenu du bouton.
• fullWidth : Quand true, le bouton s’étend pour remplir la largeur de son conteneur. Défaut : false.
• className : Classes supplémentaires à appliquer à l’élément bouton.
• onClick : Fonction handler appelée quand le bouton est cliqué.
• children : Définit le contenu du bouton, généralement du texte ou des éléments.
• component : Composant personnalisé à utiliser pour le rendu du bouton.
• type : L’attribut type du bouton, typiquement "button", "submit" ou "reset". Défaut : "button".