Badge

I Badge sono piccoli componenti di conteggio e etichettatura utilizzati per aggiungere informazioni aggiuntive a qualsiasi contenuto. Sono comunemente usati per mostrare conteggi di non letti, indicatori di stato o semplicemente come elementi decorativi.

Badge di base

Impostando la prop invisible su true, puoi nascondere il badge, rendendolo non visibile agli utenti.

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

Varianti di colore

La prop color determina il colore del badge. I valori possibili sono primary, secondary e 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>
        </>
    );
}

Usage with Icons and Buttons

I Badge possono avvolgere icone o pulsanti per fornire indicatori di stato.

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