Botón de icono (IconButton)

Los botones de icono (IconButtons) son elementos en los que se puede hacer clic versátiles que se pueden usar en varias partes de la interfaz. Admiten múltiples tamaños, formas y pueden estar rellenos o presentarse como botones fantasma (ghost).

Uso

Para usar IconButton, impórtalo desde tus componentes y pasa las props requeridas, como size (tamaño), variant (variante), shape (forma), disabled (deshabilitado), toggled (alternado) y onClick (al hacer clic).

Botón de icono básico

Un botón de icono simple con configuración mínima.

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

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

Tamaños de botón de icono

Demuestra cómo usar diferentes tamaños para el componente 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>
        </>
    );
}

Formas de botón de icono

Ilustrando cómo utilizar diferentes formas (circular o cuadrado) para el componente 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 de botón de icono

Mostrando las diferentes variantes (ghost o filled) disponibles para estilizar el 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>
        </>
    );
}