Schaltfläche (Button)

Schaltflächen (Buttons) sind interaktive UI-Elemente, die es Benutzern ermöglichen, bestimmte Aktionen oder Ereignisse innerhalb einer Anwendung auszulösen. Sie spielen eine entscheidende Rolle in Benutzeroberflächen und bieten einen visuellen Hinweis für vom Benutzer initiierte Aktionen. Schaltflächen können in verschiedenen Kontexten verwendet werden, einschließlich Formularen zum Absenden, Dialogen zur Bestätigung und Symbolleisten für den schnellen Zugriff auf Funktionen. Durch Klicken auf eine Schaltfläche können Benutzer Daten übermitteln, neue Fenster öffnen, Befehle ausführen und vieles mehr. Das macht Schaltflächen zu einer wesentlichen Komponente für die Benutzerinteraktion.

Größe

Die Eigenschaft size kann verwendet werden, um die Größe der Schaltfläche zu ändern.

Schaltflächen sind in fünf Größen erhältlich: small, medium, large, xl und 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

Die Eigenschaft variant ändert den Stil der Schaltfläche. Mögliche Werte sind filled, outlined und 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>
    );
}

Farbe

Die Eigenschaft color legt das Farbthema der Schaltfläche fest. Mögliche Werte sind primary, secondary, text, error und 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>
    );
}

Deaktiviert

Wenn disabled auf true gesetzt wird, wird die Schaltfläche deaktiviert und Interaktionen werden verhindert.

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

Start-Icon

Mit der Eigenschaft startIcon können Sie ein Icon vor dem Inhalt der Schaltfläche einfügen.

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

Volle Breite

Die Eigenschaft fullWidth bewirkt, dass die Schaltfläche über die gesamte Breite ihres Containers ausgedehnt wird.

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

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

Benutzerdefinierter Klassenname

Die Eigenschaft className ermöglicht es Ihnen, benutzerdefinierte CSS-Klassen an die Schaltflächenkomponente zu übergeben.

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

Button-Komponenten-Eigenschaften

• variant: Definiert die Stilvariante der Schaltfläche. Optionen sind "filled", "outlined" oder "text". Standard ist "filled".
• disabled: Deaktiviert die Schaltfläche und verhindert Benutzerinteraktionen. Standard ist false.
• color: Legt das Farbthema der Schaltfläche fest. Optionen sind "primary", "secondary", "neutral", "text" oder "error".
• size: Gibt die Größe der Schaltfläche an. Optionen sind "small", "medium", "large", "xl" oder "2xl". Standard ist "medium".
• startIcon: Fügt ein Icon am Anfang des Schaltflächeninhalts hinzu.
• fullWidth: Wenn true, dehnt sich die Schaltfläche aus, um die Breite des Containers auszufüllen. Standard ist false.
• className: Zusätzliche Klassen, die auf das Schaltflächenelement angewendet werden sollen.
• onClick: Handler-Funktion, die aufgerufen wird, wenn auf die Schaltfläche geklickt wird.
• children: Definiert den Inhalt der Schaltfläche, typischerweise Text oder Elemente.
• component: Benutzerdefinierte Komponente, die zum Rendern der Schaltfläche verwendet werden soll.
• type: Das type-Attribut für die Schaltfläche, typischerweise "button", "submit" oder "reset". Standard ist "button".