Insignia (Badge)

Las insignias (badges) son componentes de recuento y etiquetado pequeños que se utilizan para agregar información adicional a cualquier contenido. Suelen usarse para mostrar conteos no leídos, indicadores de estado o simplemente como nodos decorativos.

Insignia básica

Al establecer la prop invisible en true, puedes ocultar la insignia, haciéndola no visible para los usuarios.

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

export default function BadgeInvisibleDemo() {
    const [visible, setVisible] = React.useState<boolean | null>(true);
    return (
        <>
            <Badge color="primary" invisible={!visible}>
                <Chip>Content with Badge</Chip>
            </Badge>

            <Button onClick={() => setVisible(!visible)}>
                Toggle badge
            </Button>
        </>
    );
}

Variantes de color

La prop color determina el color de la insignia. Los valores posibles son primary (primario), secondary (secundario) y error (error).

import React from "react";
import { Badge, Chip } from "@firecms/ui";

export default function BadgeColorDemo() {
    return (
        <>
            <Badge color="primary">
                <Chip>Primary color</Chip>
            </Badge>

            <Badge color="secondary">
                <Chip>Secondary color</Chip>
            </Badge>

            <Badge color="error">
                <Chip>Error color</Chip>
            </Badge>
        </>
    );
}

Uso con iconos y botones

Las insignias se pueden envolver alrededor de íconos o botones para proporcionar indicadores de estado.

import React from "react";
import { AnchorIcon, Badge, Button, IconButton } from "@firecms/ui";

export default function BadgeIconDemo() {
    return (
        <>
            <Badge color="error">
                <IconButton>
                    <AnchorIcon/>
                </IconButton>
            </Badge>

            <Badge color="secondary">
                <Button>
                    Fix
                </Button>
            </Badge>
        </>
    );
}