Badge

Les Badges sont de petits composants de comptage et d’étiquetage utilisés pour ajouter des informations supplémentaires à tout contenu. Ils sont couramment utilisés pour afficher des compteurs non lus, des indicateurs d’état, ou juste comme nœuds décoratifs.

Badge de base

En définissant la prop invisible à true, vous pouvez masquer le badge, le rendant invisible aux utilisateurs.

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 couleur

La prop color détermine la couleur du badge. Les valeurs possibles sont primary, secondary et 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>
        </>
    );
}

Utilisation avec des icônes et des boutons

Les badges peuvent être enveloppés autour d’icônes ou de boutons pour fournir des indicateurs d’état.

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