Badge

Badges são pequenos componentes de contagem e rotulagem usados para adicionar informações adicionais a qualquer conteúdo. São comumente usados para exibir contagens de não lidos, indicadores de status ou apenas como elementos decorativos.

Badge básico

Ao definir a prop invisible como true, você pode ocultar o badge, tornando-o não visível para os usuários.

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 cor

A prop color determina a cor do badge. Os valores possíveis são 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

Badges podem envolver ícones ou botões para fornecer indicadores de status.

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