Compound tag

A CompoundTag is a Tag split in two: a key on the left and a value on the right. Use it for properties and filters, such as env and production.

Usage#

import { CompoundTag } from "@clawscale/react";

<CompoundTag leftContent="env">production</CompoundTag>

Examples#

Basic#

leftContent is the key. children are the value.

envproductionregioneu-west-1ownerdata-platformrows3.4M

core/compound-tag/basic.tsx

import { CompoundTag } from "@clawscale/react";

export default function CompoundTagBasic() {
  return (
    <>
      <CompoundTag leftContent="env">production</CompoundTag>
      <CompoundTag leftContent="region">eu-west-1</CompoundTag>
      <CompoundTag leftContent="owner">data-platform</CompoundTag>
      <CompoundTag leftContent="rows">3.4M</CompoundTag>
    </>
  );
}

Intent#

intent colors the tag. The key keeps a stronger shade than the value.

envdevelopmentenvstagingstatushealthyfreshness3 h behindenvproduction

core/compound-tag/intent.tsx

import { CompoundTag } from "@clawscale/react";

export default function CompoundTagIntent() {
  return (
    <>
      <CompoundTag leftContent="env">development</CompoundTag>
      <CompoundTag intent="primary" leftContent="env">
        staging
      </CompoundTag>
      <CompoundTag intent="success" leftContent="status">
        healthy
      </CompoundTag>
      <CompoundTag intent="warning" leftContent="freshness">
        3 h behind
      </CompoundTag>
      <CompoundTag intent="danger" leftContent="env">
        production
      </CompoundTag>
    </>
  );
}

Minimal#

minimal uses light tints instead of solid fills. Use it in dense tables and lists.

envdevelopmentenvstagingstatushealthyfreshness3 h behindenvproduction

core/compound-tag/minimal.tsx

import { CompoundTag } from "@clawscale/react";

export default function CompoundTagMinimal() {
  return (
    <>
      <CompoundTag minimal leftContent="env">
        development
      </CompoundTag>
      <CompoundTag minimal intent="primary" leftContent="env">
        staging
      </CompoundTag>
      <CompoundTag minimal intent="success" leftContent="status">
        healthy
      </CompoundTag>
      <CompoundTag minimal intent="warning" leftContent="freshness">
        3 h behind
      </CompoundTag>
      <CompoundTag minimal intent="danger" leftContent="env">
        production
      </CompoundTag>
    </>
  );
}

Removable#

onRemove adds a remove button after the value. Use it for active filters.

statusfailedregioneu-west-1ownerdata-platform

core/compound-tag/removable.tsx

import { Button, CompoundTag } from "@clawscale/react";
import { useState } from "react";

const FILTERS = [
  { key: "status", value: "failed" },
  { key: "region", value: "eu-west-1" },
  { key: "owner", value: "data-platform" },
];

export default function CompoundTagRemovable() {
  const [filters, setFilters] = useState(FILTERS);
  if (filters.length === 0) {
    return <Button icon="reset" text="Restore filters" onClick={() => setFilters(FILTERS)} />;
  }
  return (
    <>
      {filters.map((filter) => (
        <CompoundTag
          key={filter.key}
          leftContent={filter.key}
          onRemove={() => setFilters((current) => current.filter((item) => item !== filter))}
        >
          {filter.value}
        </CompoundTag>
      ))}
    </>
  );
}

Props interface#

CompoundTag accepts the other Tag props too: icon, endIcon, round, size, fill and interactive.

interface CompoundTagProps extends TagSharedProps, React.RefAttributes<HTMLSpanElement>, React.HTMLAttributes<HTMLSpanElement>

@clawscale/react

Props	Description
`active`	`boolean` = `false` Whether the tag should appear in an active state. Inherited from `TagSharedProps`
`children`required	`React.ReactNode` Child nodes which will be rendered on the right side of the tag (e.g. the "value" in a key-value pair).
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`endIcon`	`IconName \| MaybeElement` Name of a Blueprint UI icon (or an icon element) to render at the end of the tag, after the child node(s). Inherited from `TagSharedProps`
`fill`	`boolean` = `false` Whether the tag should take up the full width of its container. Inherited from `TagSharedProps`
`icon`	`IconName \| MaybeElement` Name of a Blueprint UI icon (or an icon element) to render on the left side of the tag, before any content. Inherited from `TagSharedProps`
`intent`	`Intent` Visual intent color to apply to element. Inherited from `IntentProps`
`interactive`	`boolean` = `false` Whether the tag should visually respond to user interactions. If set to `true`, hovering over the tag will change its color and mouse cursor. Inherited from `TagSharedProps`
`large`deprecated	`boolean` = `false` Whether this tag should use large styles. use size="large" instead Inherited from `TagSharedProps`
`leftContent`required	`React.ReactNode` Content to be rendered on the left side of the tag (e.g. the "key" in a key-value pair). This prop must be defined; if you have no content to show here, then use a `<Tag>` instead.
`minimal`	`boolean` = `false` Whether this tag should use minimal styles. Inherited from `TagSharedProps`
`onClick`	`(e: React.MouseEvent<HTMLSpanElement>) => void` Callback invoked when the tag is clicked. Recommended when `interactive` is `true`. Inherited from `TagSharedProps`
`onRemove`	`(e: React.MouseEvent<HTMLButtonElement>, tagProps: CompoundTagProps) => void` Click handler for remove button. The remove button will only be rendered if this prop is defined.
`rightIcon`deprecated	`IconName \| MaybeElement` Name of a Blueprint UI icon (or an icon element) to render on the right side of the tag, after the child node(s). Use `endIcon` instead Inherited from `TagSharedProps`
`round`	`boolean` = `false` Whether this tag should have rounded ends. Inherited from `TagSharedProps`
`size`	`NonSmallSize` = `"medium"` The size of the tag. Inherited from `TagSharedProps`