Tag

A Tag labels an item with a short piece of text, such as a status, a category or a filter. For key and value pairs, use a Compound tag.

Usage#

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

<Tag intent="success" minimal>
  Healthy
</Tag>

Examples#

Basic#

Pass the text as children. Text that does not fit ends with an ellipsis, unless multiline is set.

orders_dailyeu-west-1Parquet3.4M rows

core/tag/basic.tsx

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

export default function TagBasic() {
  return (
    <>
      <Tag>orders_daily</Tag>
      <Tag>eu-west-1</Tag>
      <Tag>Parquet</Tag>
      <Tag>3.4M rows</Tag>
    </>
  );
}

Intent#

intent gives the tag a meaning, such as a run status.

QueuedRunningSucceededDelayedFailed

core/tag/intent.tsx

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

export default function TagIntent() {
  return (
    <>
      <Tag>Queued</Tag>
      <Tag intent="primary">Running</Tag>
      <Tag intent="success">Succeeded</Tag>
      <Tag intent="warning">Delayed</Tag>
      <Tag intent="danger">Failed</Tag>
    </>
  );
}

Minimal#

minimal uses a light tint instead of a solid fill. Use it in dense tables and lists.

QueuedRunningSucceededDelayedFailed

core/tag/minimal.tsx

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

export default function TagMinimal() {
  return (
    <>
      <Tag minimal>Queued</Tag>
      <Tag minimal intent="primary">
        Running
      </Tag>
      <Tag minimal intent="success">
        Succeeded
      </Tag>
      <Tag minimal intent="warning">
        Delayed
      </Tag>
      <Tag minimal intent="danger">
        Failed
      </Tag>
    </>
  );
}

Interactive#

interactive adds hover styles and keyboard support. A tag with onClick is interactive by default. active marks it as selected and applies only to interactive tags.

us-east-1us-west-2eu-west-1ap-southeast-2

core/tag/interactive.tsx

import { Tag } from "@clawscale/react";
import { useState } from "react";

const REGIONS = ["us-east-1", "us-west-2", "eu-west-1", "ap-southeast-2"];

export default function TagInteractive() {
  const [selected, setSelected] = useState(["eu-west-1"]);
  const toggle = (region: string) =>
    setSelected((current) =>
      current.includes(region) ? current.filter((item) => item !== region) : [...current, region],
    );
  return (
    <>
      {REGIONS.map((region) => (
        <Tag key={region} interactive active={selected.includes(region)} onClick={() => toggle(region)}>
          {region}
        </Tag>
      ))}
    </>
  );
}

Removable#

onRemove adds a remove button at the end of the tag.

orders_dailycustomerspaymentsrefunds

core/tag/removable.tsx

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

const DATASETS = ["orders_daily", "customers", "payments", "refunds"];

export default function TagRemovable() {
  const [datasets, setDatasets] = useState(DATASETS);
  if (datasets.length === 0) {
    return <Button icon="reset" text="Restore datasets" onClick={() => setDatasets(DATASETS)} />;
  }
  return (
    <>
      {datasets.map((name) => (
        <Tag key={name} onRemove={() => setDatasets((current) => current.filter((item) => item !== name))}>
          {name}
        </Tag>
      ))}
    </>
  );
}

Round#

round gives the tag fully rounded ends.

v2.14.0BetaHealthy24 columns

core/tag/round.tsx

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

export default function TagRound() {
  return (
    <>
      <Tag round>v2.14.0</Tag>
      <Tag round intent="primary">
        Beta
      </Tag>
      <Tag round minimal intent="success">
        Healthy
      </Tag>
      <Tag round minimal>
        24 columns
      </Tag>
    </>
  );
}

Icons#

icon renders before the text and endIcon after it.

orders_dailyeu-west-1Last 24 hoursRunbook

core/tag/icons.tsx

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

export default function TagIcons() {
  return (
    <>
      <Tag icon="database">orders_daily</Tag>
      <Tag icon="globe" minimal>
        eu-west-1
      </Tag>
      <Tag icon="time" endIcon="caret-down" minimal>
        Last 24 hours
      </Tag>
      <Tag endIcon="share">Runbook</Tag>
    </>
  );
}

Size#

size accepts medium (default) and large.

MediumLarge

core/tag/size.tsx

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

export default function TagSize() {
  return (
    <>
      <Tag size="medium">Medium</Tag>
      <Tag size="large">Large</Tag>
    </>
  );
}

Interactive playground#

View source on GitHub

Props interface#

Tag renders a <span> and accepts its HTML attributes.

interface TagProps extends Props, IntentProps, 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`	`React.ReactNode` Child nodes which will be rendered inside a `<Text>` element.
`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`
`htmlTitle`	`string` HTML title to be passed to the <Text> component
`icon`	`IconName \| MaybeElement` Name of a Blueprint UI icon (or an icon element) to render on the left side of the tag, before the child nodes.
`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.
`large`deprecated	`boolean` = `false` Whether this tag should use large styles. use size="large" instead Inherited from `TagSharedProps`
`minimal`	`boolean` = `false` Whether this tag should use minimal styles. Inherited from `TagSharedProps`
`multiline`	`boolean` = `false` Whether tag content should be allowed to occupy multiple lines. If `false`, a single line of text will be truncated with an ellipsis if it overflows. Note that icons will be vertically centered relative to multiline text.
`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: TagProps) => 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`