Chip

Les Chips sont des éléments compacts qui représentent une entrée, un attribut ou une action. Ils permettent aux utilisateurs de saisir des informations, de faire des sélections, de filtrer du contenu ou de déclencher des actions.

Utilisation

Pour utiliser le Chip, importez-le depuis vos composants et passez les props nécessaires comme children, colorScheme, size, error, outlined, onClick et icon.

Chip de base

Un chip simple avec une configuration minimale. Il affiche un morceau de texte ou une etiquette.

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

export default function ChipBasicDemo() {
    return (
        <Chip>
            Basic Chip
        </Chip>
    );
}

Tailles de Chip

Illustration de l’utilisation de différentes tailles pour le composant chip. Vous pouvez choisir entre tiny, small et medium.

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

export default function ChipSizesDemo() {
    return (
        <>
            <Chip size="small">Small Chip</Chip>
            <Chip size="medium">Medium Chip</Chip>
            <Chip size="large">Large Chip</Chip>
        </>
    );
}

Couleurs de Chip

Démontre l’utilisation de la prop colorScheme pour personnaliser l’apparence du chip selon le thème de votre application.

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

export default function ChipColorsDemo() {
    return (
        <div className={"flex flex-wrap gap-2"}>
            <Chip colorScheme="blueLighter">blueLighter</Chip>
            <Chip colorScheme="cyanLighter">cyanLighter</Chip>
            <Chip colorScheme="tealLighter">tealLighter</Chip>
            <Chip colorScheme="greenLighter">greenLighter</Chip>
            <Chip colorScheme="yellowLighter">yellowLighter</Chip>
            <Chip colorScheme="orangeLighter">orangeLighter</Chip>
            <Chip colorScheme="redLighter">redLighter</Chip>
            <Chip colorScheme="pinkLighter">pinkLighter</Chip>
            <Chip colorScheme="purpleLighter">purpleLighter</Chip>
            <Chip colorScheme="grayLighter">grayLighter</Chip>

            <Chip colorScheme="blueLight">blueLight</Chip>
            <Chip colorScheme="cyanLight">cyanLight</Chip>
            <Chip colorScheme="tealLight">tealLight</Chip>
            <Chip colorScheme="greenLight">greenLight</Chip>
            <Chip colorScheme="yellowLight">yellowLight</Chip>
            <Chip colorScheme="orangeLight">orangeLight</Chip>
            <Chip colorScheme="redLight">redLight</Chip>
            <Chip colorScheme="pinkLight">pinkLight</Chip>
            <Chip colorScheme="purpleLight">purpleLight</Chip>
            <Chip colorScheme="grayLight">grayLight</Chip>

            <Chip colorScheme="blueDark">blueDark</Chip>
            <Chip colorScheme="cyanDark">cyanDark</Chip>
            <Chip colorScheme="tealDark">tealDark</Chip>
            <Chip colorScheme="greenDark">greenDark</Chip>
            <Chip colorScheme="yellowDark">yellowDark</Chip>
            <Chip colorScheme="orangeDark">orangeDark</Chip>
            <Chip colorScheme="redDark">redDark</Chip>
            <Chip colorScheme="pinkDark">pinkDark</Chip>
            <Chip colorScheme="purpleDark">purpleDark</Chip>
            <Chip colorScheme="grayDark">grayDark</Chip>

            <Chip colorScheme="blueDarker">blueDarker</Chip>
            <Chip colorScheme="cyanDarker">cyanDarker</Chip>
            <Chip colorScheme="tealDarker">tealDarker</Chip>
            <Chip colorScheme="greenDarker">greenDarker</Chip>
            <Chip colorScheme="yellowDarker">yellowDarker</Chip>
            <Chip colorScheme="orangeDarker">orangeDarker</Chip>
            <Chip colorScheme="redDarker">redDarker</Chip>
            <Chip colorScheme="pinkDarker">pinkDarker</Chip>
            <Chip colorScheme="purpleDarker">purpleDarker</Chip>
            <Chip colorScheme="grayDarker">grayDarker</Chip>
        </div>
    );
}

Chip avec icône

Montre comment utiliser un chip avec une icône pour une meilleure interaction utilisateur ou pour fournir plus d’informations dans le chip.

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

export default function ChipIconDemo() {
    return (
        <Chip icon={<FaceIcon size={"small"}/>}>
            Chip with Icon
        </Chip>
    );
}

Chip cliquable

Cet exemple démontre un chip cliquable qui déclenche une action au clic. Utile pour les tags interactifs ou les sélections.

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

export default function ChipClickableDemo() {
    const handleClick = () => {
        console.log("Chip clicked");
    };

    return (
        <Chip onClick={handleClick}>
            Clickable Chip
        </Chip>
    );
}