Button

I pulsanti sono elementi UI interattivi che consentono agli utenti di attivare azioni o eventi specifici all’interno di un’applicazione. Svolgono un ruolo cruciale nelle interfacce utente, fornendo un segnale visivo per le azioni avviate dall’utente. I pulsanti possono essere utilizzati in vari contesti, inclusi moduli per l’invio, dialog per la conferma e barre degli strumenti per accedere rapidamente a funzioni e funzionalità. Cliccando un pulsante, gli utenti possono inviare dati, aprire nuove finestre, eseguire comandi e molto altro, rendendo i pulsanti un componente essenziale per guidare l’interazione e il coinvolgimento dell’utente.

Dimensione

La prop size può essere usata per cambiare la dimensione del pulsante.

I pulsanti sono disponibili in tre dimensioni: small, medium, large, xl e 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 cambia lo stile del pulsante. I valori possibili sono filled, outlined e 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>
    );
}

Colore

La prop color imposta il tema colore del pulsante. I valori possibili sono primary, secondary, text, error e 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>
    );
}

Disabilitato

Impostando disabled su true si disabilita il pulsante, impedendo le interazioni.

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

Icona iniziale

La prop startIcon consente di includere un’icona prima del contenuto del pulsante.

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

Larghezza piena

La prop fullWidth fa espandere il pulsante per occupare tutta la larghezza del suo contenitore.

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

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

Nome classe personalizzato

La prop className consente di passare classi CSS personalizzate al componente pulsante.

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 del componente Button

• variant: Definisce la variante di stile del pulsante. Le opzioni sono "filled", "outlined" o "text". Default "filled".
• disabled: Disabilita il pulsante, impedendo l’interazione dell’utente. Default false.
• color: Imposta il tema colore del pulsante. Le opzioni sono "primary", "secondary", "neutral", "text" o "error".
• size: Specifica la dimensione del pulsante. Le opzioni sono "small", "medium", "large", "xl" o "2xl". Default "medium".
• startIcon: Aggiunge un’icona all’inizio del contenuto del pulsante.
• fullWidth: Quando true, il pulsante si espande per riempire la larghezza del contenitore. Default false.
• className: Classi aggiuntive da applicare all’elemento pulsante.
• onClick: Funzione handler chiamata quando si clicca il pulsante.
• children: Definisce il contenuto del pulsante, tipicamente testo o elementi.
• component: Componente personalizzato da usare per il rendering del pulsante.
• type: L’attributo type per il pulsante, tipicamente "button", "submit" o "reset". Default "button".