Tag

Variants #

Admire these beautiful colors 💅

Basics #

<Tag>Default</Tag>
<Tag variant="primary">Primary</Tag>
<Tag variant="secondary">Secondary</Tag>
<Tag variant="dark">Dark</Tag>
Copy

States #

<Tag variant="success">Success</Tag>
<Tag variant="error">Error</Tag>
<Tag variant="warning">Warning</Tag>
<Tag variant="info">Info</Tag>
Copy

Subs #

<Tag variant="1">1</Tag>
<Tag variant="2">2</Tag>
<Tag variant="3">3</Tag>
<Tag variant="4">4</Tag>
<Tag variant="5">5</Tag>
<Tag variant="6">6</Tag>
<Tag variant="7">7</Tag>
Copy

Sizes #

Use size property with xs, sm, md or lg.

<Tag size="xs">
  Tiny
</Tag>
<Tag size="sm">
  Small
</Tag>
<Tag size="md">
  Medium
</Tag>
<Tag size="lg">
  Large
</Tag>
Copy

One character style #

When we have only one character, we apply same size for the width and height (it implicitely sets shape prop to square)

<Tag size="sm">
  1
</Tag>
<Tag size="md">
  1
</Tag>
<Tag size="lg">
  1
</Tag>
Copy

Shape #

Set shape prop to square to get a square no matter the content.

<Tag size="lg" shape="square">
  1
</Tag>
<Tag size="lg" shape="square" w={50}>
  Long text
</Tag>
Copy

Set shape prop to circle to set a border-radius 50%.

<Tag size="lg" shape="circle">
  1
</Tag>
Copy

OnRemove #

Simply add a function onRemove to reveal a cross icon with a remove action (or other).

function() {
  const [isHide, setHide] = React.useState(false)

  return isHide ? (
    <Text fontSize="body3" fontWeight="bold" color="danger.500" m={0}>
      Tag removed
    </Text>
  ) : (
    <Tag onRemove={() => setHide(true)}>Example of remove tag</Tag>
  )
}
Copy

Properties #

Dependencies #

Peer dependencies #