Tag

Used to label, categorize, or organize items using keywords that describe them.

The Tag component is useful when categorizing and organizing items with short keywords. It is built upon the Chakra UI Tag.

Keep in mind that the Tag component is for display of data and not user interactions (with the exception of the close button).

Base example

Can display only a simple text label or with additional visual information using the icon property. It also supports a close button using the onClose-prop.

import { Tag } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Tag>Label</Tag>;
}

Variants

The Tag component comes with multiple variants. The bare <Tag> defaults to Tag.Neutral. Use the solid prop to change the tag to a solid color.

Each variant is also available via the variant string prop, useful when mapping data to a tag color dynamically:

// These are equivalent
<Tag.Success>In stock</Tag.Success>
<Tag variant="success">In stock</Tag>

// As are these
<Tag.Success solid>In stock</Tag.Success>
<Tag variant="success" solid>In stock</Tag>

import { Stack, Tag } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack direction="row">
      <Stack>
        <Tag.Info>Info</Tag.Info>
        <Tag.Primary>Primary</Tag.Primary>
        <Tag.Secondary>Secondary</Tag.Secondary>
        <Tag.Success>Success</Tag.Success>
        <Tag.Warning>Warning</Tag.Warning>
        <Tag.Error>Error</Tag.Error>
        <Tag.Muted>Muted</Tag.Muted>
        <Tag.Neutral>Neutral</Tag.Neutral>
        <Tag.Strong>Strong</Tag.Strong>
        <Tag.PickerCoral>PickerCoral</Tag.PickerCoral>
        <Tag.PickerHoney>PickerHoney</Tag.PickerHoney>
        <Tag.PickerLemon>PickerLemon</Tag.PickerLemon>
        <Tag.PickerLime>PickerLime</Tag.PickerLime>
        <Tag.PickerOlive>PickerOlive</Tag.PickerOlive>
        <Tag.PickerSky>PickerSky</Tag.PickerSky>
        <Tag.PickerBerry>PickerBerry</Tag.PickerBerry>
        <Tag.PickerPlum>PickerPlum</Tag.PickerPlum>
        <Tag.PickerFlamingo>PickerFlamingo</Tag.PickerFlamingo>
        <Tag.PickerFog>PickerFog</Tag.PickerFog>
      </Stack>
      <Stack>
        <Tag.Info solid>Info</Tag.Info>
        <Tag.Primary solid>Primary</Tag.Primary>
        <Tag.Secondary solid>Secondary</Tag.Secondary>
        <Tag.Success solid>Success</Tag.Success>
        <Tag.Warning solid>Warning</Tag.Warning>
        <Tag.Error solid>Error</Tag.Error>
        <Tag.Muted solid>Muted</Tag.Muted>
        <Tag.Neutral solid>Neutral</Tag.Neutral>
        <Tag.Strong solid>Strong</Tag.Strong>
        <Tag.PickerCoral solid>PickerCoral</Tag.PickerCoral>
        <Tag.PickerHoney solid>PickerHoney</Tag.PickerHoney>
        <Tag.PickerLemon solid>PickerLemon</Tag.PickerLemon>
        <Tag.PickerLime solid>PickerLime</Tag.PickerLime>
        <Tag.PickerOlive solid>PickerOlive</Tag.PickerOlive>
        <Tag.PickerSky solid>PickerSky</Tag.PickerSky>
        <Tag.PickerBerry solid>PickerBerry</Tag.PickerBerry>
        <Tag.PickerPlum solid>PickerPlum</Tag.PickerPlum>
        <Tag.PickerFlamingo solid>PickerFlamingo</Tag.PickerFlamingo>
        <Tag.PickerFog solid>PickerFog</Tag.PickerFog>
      </Stack>
    </Stack>
  );
}

Icons

You can render an Icon to the left of the passed children using the icon prop and passing an icon component from the library.

import { Tag, TriangleWarningIcon } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Tag.Warning icon={TriangleWarningIcon}>Label</Tag.Warning>;
}

Prepend and Append

You can render a JSX element to the left or right of the passed children using the prepend or append prop.

import { DateIcon, Flex, Tag, ThemeSpace } from "@caspeco/casper-ui-library";

export default function Demo() {
  const prepend = <>🐱</>;
  const append = <DateIcon />;
  return (
    <Flex gap={ThemeSpace.Medium}>
      <Tag.Warning prepend={prepend}>Prepend</Tag.Warning>
      <Tag.Warning append={append}>Append</Tag.Warning>
    </Flex>
  );
}

Sizes

The Tag component comes in three sizes: xs (default), sm, and md.

import { EatInIcon, Stack, Tag } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack>
      <Tag.PickerHoney size="xs" icon={EatInIcon}>
        Brunch
      </Tag.PickerHoney>
      <Tag.PickerLime size="sm" icon={EatInIcon}>
        Lunch
      </Tag.PickerLime>
      <Tag.PickerSky size="md" icon={EatInIcon}>
        Dinner
      </Tag.PickerSky>
    </Stack>
  );
}

Close Button

While the Tag component is mainly for static display of data, it can also be used as a closeable component. Using the onClose prop will render a close button on the right side of the tag, and when clicked, the function passed to the prop will be called.

When using the onClose-property an additional ariaLabel-property is required. It is the aria label of the close button. The aria label must identify which tag the close button interacts with. This is important for screen readers to understand the context of each tag close button.

import { Button, Divider, Stack, Tag } from "@caspeco/casper-ui-library";
import { useState } from "react";

export default function Demo() {
  const initialState = ["Desserts", "Drinks", "Hot dishes"];
  const [categories, setCategories] = useState(initialState);

  const filter = (category: string) => {
    setCategories(categories.filter((c) => c !== category));
  };

  const reset = () => {
    setCategories(initialState);
  };

  return (
    <Stack>
      <p>Active categories</p>
      {categories.map((category) => (
        <Tag.Primary key={category} onClose={() => filter(category)} ariaLabel={`Remove ${category} tag`}>
          {category}
        </Tag.Primary>
      ))}
      <Divider />
      <Button onClick={reset}>Reset categories</Button>
    </Stack>
  );
}