Abzeichen (Badge)

Abzeichen (Badges) sind kleine Zähl- und Kennzeichnungskomponenten, die verwendet werden, um jedem Inhalt zusätzliche Informationen hinzuzufügen. Sie werden häufig verwendet, um Zähler für ungelesene Elemente anzuzeigen, als Statusindikatoren oder einfach als dekorative Elemente.

Einfaches Abzeichen

Indem Sie die Eigenschaft invisible auf true setzen, können Sie das Abzeichen ausblenden, sodass es für Benutzer nicht sichtbar ist.

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

Farbvarianten

Die Eigenschaft color bestimmt die Farbe des Abzeichens. Mögliche Werte sind primary, secondary und 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>
        </>
    );
}

Verwendung mit Icons und Schaltflächen

Abzeichen können um Icons oder Schaltflächen gelegt werden, um Statusindikatoren bereitzustellen.

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