Botón (Button)

Los botones son elementos interactivos de la interfaz de usuario que permiten a los usuarios desencadenar acciones o eventos específicos dentro de una aplicación. Juegan un papel crucial en las interfaces de usuario, proporcionando una señal visual para las acciones iniciadas por el usuario. Los botones se pueden utilizar en varios contextos, incluyendo formularios para enviar datos, cuadros de diálogo para confirmación, y barras de herramientas para un acceso rápido a funciones y características. Al hacer clic en un botón, los usuarios pueden enviar datos, abrir nuevas ventanas, ejecutar comandos y mucho más, lo que convierte a los botones en un componente esencial para impulsar la interacción y la participación del usuario.

Tamaño (Size)

La prop size se puede usar para cambiar el tamaño del botón.

Los botones vienen en tres tamaños: small (pequeño), medium (mediano), large (grande), xl y 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 (Variant)

La prop variant cambia el estilo del botón. Los valores posibles son filled (relleno), outlined (contorneado) y text (texto).

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

Color

La prop color establece el tema de color del botón. Los valores posibles son primary (primario), secondary (secundario), text (texto), error y 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>
    );
}

Deshabilitado (Disabled)

Establecer disabled en true deshabilita el botón, evitando interacciones.

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

Icono inicial (Start Icon)

La prop startIcon te permite incluir un ícono antes del contenido del botón.

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

Ancho completo (Full Width)

La prop fullWidth hace que el botón se expanda para ocupar todo el ancho de su contenedor.

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

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

Nombre de clase personalizado (Custom Class Name)

La prop className te permite pasar clases CSS personalizadas al componente de botón.

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 Botón

• variant: Define la variante de estilo del botón. Las opciones son "filled", "outlined" o "text". Por defecto a "filled".
• disabled: Deshabilita el botón, previniendo la interacción del usuario. Por defecto a false.
• color: Establece el tema de color del botón. Las opciones son "primary", "secondary", "neutral", "text" o "error".
• size: Especifica el tamaño del botón. Las opciones son "small", "medium", "large", "xl" o "2xl". Por defecto a "medium".
• startIcon: Agrega un ícono al inicio del contenido del botón.
• fullWidth: Cuando es true, el botón se expandirá para llenar el ancho de su contenedor. Por defecto a false.
• className: Clases adicionales para aplicar al elemento botón.
• onClick: Función controladora llamada cuando se hace clic en el botón.
• children: Define el contenido del botón, típicamente texto o elementos.
• component: Componente personalizado para ser usado en el renderizado del botón.
• type: El atributo de tipo para el botón, típicamente "button", "submit" o "reset". Por defecto a "button".