IconButton

Les IconButtons sont des éléments cliquables polyvalents qui peuvent être utilisés dans diverses parties de l’interface. Ils supportent plusieurs tailles, formes, et peuvent être soit remplis soit présentés comme des boutons fantôme.

Utilisation

Pour utiliser le IconButton, importez-le depuis vos composants et passez les props requises comme size, variant, shape, disabled, toggled et onClick.

IconButton de base

Un bouton d’icône simple avec une configuration minimale.

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

export default function IconButtonBasicDemo() {
    return (
        <IconButton
            variant="filled"
            onClick={() => console.log("Clicked!")}>
            <AddIcon/>
        </IconButton>
    );
}

Tailles d’IconButton

Démontre comment utiliser différentes tailles pour le composant IconButton.

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

export default function IconButtonSizeDemo() {
    return (
        <>
            <IconButton
                variant="filled"
                size="small"
                onClick={() => console.log("Small Clicked!")}>
                <AddIcon size={"small"}/>
            </IconButton>
            <IconButton
                variant="filled"
                size="medium"
                onClick={() => console.log("Medium Clicked!")}>
                <AddIcon/>
            </IconButton>
            <IconButton
                variant="filled"
                size="large"
                onClick={() => console.log("Large Clicked!")}>
                <AddIcon size={"large"}/>
            </IconButton>
        </>
    );
}

Formes d’IconButton

Illustration de l’utilisation de différentes formes (circulaire ou carrée) pour le composant IconButton.

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

export default function IconButtonShapeDemo() {
    return (
        <>
            <IconButton
                variant="filled"
                shape="circular"
                onClick={() => console.log("Circular Clicked!")}>
                <AddIcon/>
            </IconButton>
            <IconButton
                variant="filled"
                shape="square"
                onClick={() => console.log("Square Clicked!")}>
                <AddIcon/>
            </IconButton>
        </>
    );
}

Variantes d’IconButton

Montrant les différentes variantes (fantôme ou rempli) disponibles pour styliser l’IconButton.

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

export default function IconButtonVariantDemo() {
    return (
        <>
            <IconButton variant="ghost" onClick={() => console.log('Ghost Clicked!')}>
                <AddIcon />
            </IconButton>
            <IconButton variant="filled" onClick={() => console.log('Filled Clicked!')}>
                <AddIcon />
            </IconButton>
        </>
    );
}