Tag

@coinbase/cds-web@9.28.0

A small label for categorizing or labeling content.

import { Tag } from '@coinbase/cds-web/tag/Tag'

󰒨

Source

󰏖

Storybook

󰏖

Figma

󰕨

󰏖

View as Markdown

---

Related components

• Text

Basics

Informational tags (default) are used to note a characteristic or state of an object. Promotional tags for editorial, ephemeral communication.

Loading...

󰙡

Live Code

<VStack gap={2}>
  <HStack gap={2} wrap>
    <Tag intent="informational" colorScheme="green">
      Green
    </Tag>
    <Tag intent="informational" colorScheme="blue">
      Blue
    </Tag>
    <Tag intent="informational" colorScheme="yellow">
      Yellow
    </Tag>
    <Tag intent="informational" colorScheme="purple">
      Purple
    </Tag>
    <Tag intent="informational" colorScheme="red">
      Red
    </Tag>
    <Tag intent="informational" colorScheme="gray">
      Gray
    </Tag>
  </HStack>
  <HStack gap={2} wrap>
    <Tag intent="promotional" colorScheme="green">
      Green
    </Tag>
    <Tag intent="promotional" colorScheme="blue">
      Blue
    </Tag>
    <Tag intent="promotional" colorScheme="yellow">
      Yellow
    </Tag>
    <Tag intent="promotional" colorScheme="purple">
      Purple
    </Tag>
    <Tag intent="promotional" colorScheme="red">
      Red
    </Tag>
    <Tag intent="promotional" colorScheme="gray">
      Gray
    </Tag>
  </HStack>
</VStack>

Emphasis

You can control the visual prominence of the Tag using the emphasis prop. By default, informational tags are low emphasis and promotional tags are high emphasis.

Loading...

󰙡

Live Code

<VStack gap={2}>
  <HStack gap={2} wrap>
    <Tag emphasis="high" colorScheme="green">
      High Green
    </Tag>
    <Tag emphasis="high" colorScheme="blue">
      High Blue
    </Tag>
    <Tag emphasis="high" colorScheme="yellow">
      High Yellow
    </Tag>
    <Tag intent="promotional" colorScheme="purple">
      High Purple
    </Tag>
    <Tag intent="promotional" colorScheme="red">
      High Red
    </Tag>
    <Tag intent="promotional" colorScheme="gray">
      High Gray
    </Tag>
  </HStack>
  <HStack gap={2} wrap>
    <Tag colorScheme="green">Low Green</Tag>
    <Tag colorScheme="blue">Low Blue</Tag>
    <Tag colorScheme="yellow">Low Yellow</Tag>
    <Tag intent="promotional" emphasis="low" colorScheme="purple">
      Low Purple
    </Tag>
    <Tag intent="promotional" emphasis="low" colorScheme="red">
      Low Red
    </Tag>
    <Tag intent="promotional" emphasis="low" colorScheme="gray">
      Low Gray
    </Tag>
  </HStack>
</VStack>

Icons

Use the startIcon and endIcon props to render an icon at the start or end of the tag.

Loading...

󰙡

Live Code

<VStack gap={2} alignItems="flex-start">
  <Tag colorScheme="blue" startIcon="add">
    Start icon
  </Tag>
  <Tag colorScheme="green" endIcon="add">
    End icon
  </Tag>
  <Tag colorScheme="purple" startIcon="add" endIcon="add">
    Both icons
  </Tag>
  <Tag colorScheme="red" intent="promotional" startIcon="add" endIcon="add">
    Promotional with icons
  </Tag>
</VStack>

Custom Nodes

Use the start and end props to render custom nodes at the start or end of the tag for full control over styling.

Loading...

󰙡

Live Code

<VStack gap={2} alignItems="flex-start">
  <Tag colorScheme="blue" start={<Icon color="fgNegative" name="add" size="xs" />}>
    Custom start node
  </Tag>
  <Tag colorScheme="green" end={<Icon color="fgPositive" name="add" size="xs" />}>
    Custom end node
  </Tag>
  <Tag
    colorScheme="purple"
    start={<Icon color="fgPositive" name="add" size="xs" />}
    end={<Icon color="fgNegative" name="close" size="xs" />}
  >
    Both custom nodes
  </Tag>
</VStack>

Composed Examples

Account Status

Loading...

󰙡

Live Code

<HStack justifyContent="space-between" gap="2" alignItems="center">
  <VStack gap={0.5}>
    <HStack gap={1}>
      <Text as="p" font="headline">
        Tax account status
      </Text>
      <Tag colorScheme="red">Not verified</Tag>
    </HStack>
    <Text as="p" font="body">
      Verify your info for tax reporting purposes.
    </Text>
  </VStack>
  <Button>Get started</Button>
</HStack>

Margin Ratio

Loading...

󰙡

Live Code

function MarginExample() {
  const renderStartLabelNum = useCallback((num, disabled) => {
    return (
      <Text disabled={disabled} as="span" font="title3">
        ${num.toLocaleString()} (10%)
      </Text>
    );
  }, []);

  const renderEndLabelNumStr = useCallback((num) => {
    return `$${num.toLocaleString()}`;
  }, []);

  return (
    <HStack gap={3}>
      <VStack
        justifyContent="space-between"
        gap="2"
        padding={2}
        bordered
        borderRadius={300}
        maxWidth="50%"
        background
        elevation={1}
      >
        <VStack gap={0.5}>
          <HStack gap={1}>
            <Text as="p" font="headline">
              Margin ratio
            </Text>
            <Tag colorScheme="green">Low</Tag>
          </HStack>
          <Text as="p" font="body">
            The portion of your balance being held on margin is low. No action is required.
          </Text>
        </VStack>
        <ProgressBarWithFixedLabels
          startLabel={{ value: 400, render: renderStartLabelNum }}
          endLabel={{ value: 40000, render: renderEndLabelNumStr }}
          labelPlacement="above"
        >
          <ProgressBar progress={0.1} color="bgPositive" />
        </ProgressBarWithFixedLabels>
      </VStack>
      <VStack
        justifyContent="space-between"
        gap="2"
        padding={2}
        bordered
        borderRadius={300}
        maxWidth="50%"
        background
        elevation={1}
      >
        <VStack gap={0.5}>
          <HStack gap={1}>
            <Text as="p" font="headline">
              Margin ratio
            </Text>
            <Tag colorScheme="red">high</Tag>
          </HStack>
          <Text as="p" font="body">
            Margin usage is high. Deposit funds to avoid liquidation
          </Text>
        </VStack>
        <ProgressBarWithFixedLabels
          startLabel={{ value: 60000, render: renderStartLabelNum }}
          endLabel={{ value: 90000, render: renderEndLabelNumStr }}
          labelPlacement="above"
        >
          <ProgressBar progress={0.65} color="bgNegative" />
        </ProgressBarWithFixedLabels>
      </VStack>
    </HStack>
  );
}

List Cell Integration

Loading...

󰙡

Live Code

<Box justifyContent="center">
  <Group divider={Divider} width="420px" bordered borderRadius={300} background elevation={1}>
    <ListCell
      title={
        <HStack gap={0.5}>
          Bank account
          <Tag colorScheme="green">No fees</Tag>
        </HStack>
      }
      description={
        <VStack gap={1} alignItems="flex-start">
          Use a bank account to buy crypto and deposit or withdraw cash
          <Tag intent="promotional">Recommended</Tag>
        </VStack>
      }
      accessory="arrow"
      onClick={console.log}
      multiline
      media={<IconButton name="bank" color="primary" />}
    />
    <ListCell
      title="Paypal"
      description="Use a Paypal account to buy crypto and deposit or withdraw funds"
      accessory="arrow"
      onClick={console.log}
      multiline
      media={<IconButton name="paypal" color="primary" />}
    />
    <ListCell
      title="Debit card"
      description="Use any Visa or Mastercard debit cart to make small investments"
      accessory="arrow"
      onClick={console.log}
      multiline
      media={<IconButton name="card" color="primary" />}
    />
  </Group>
</Box>