Icon-Schaltfläche (IconButton)

Icon-Schaltflächen (IconButtons) sind vielseitige klickbare Elemente, die in verschiedenen Teilen der Benutzeroberfläche verwendet werden können. Sie unterstützen mehrere Größen und Formen und können entweder gefüllt oder als Ghost-Buttons dargestellt werden.

Verwendung

Um IconButton zu verwenden, importieren Sie es aus Ihren Komponenten und übergeben Sie die erforderlichen Eigenschaften wie size, variant, shape, disabled, toggled und onClick.

Einfache Icon-Schaltfläche

Eine einfache Icon-Schaltfläche mit minimaler Konfiguration.

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

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

IconButton-Größen

Demonstriert die Verwendung verschiedener Größen für die IconButton-Komponente.

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>
        </>
    );
}

IconButton-Formen

Veranschaulicht die Verwendung verschiedener Formen (kreisförmig oder quadratisch) für die IconButton-Komponente.

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>
        </>
    );
}

IconButton-Varianten

Zeigt die verschiedenen verfügbaren Varianten (ghost oder gefüllt) für das Styling des IconButtons.

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>
        </>
    );
}