Tag

An actionable label that changes which content is displayed. It can be either an a or a button depending on which is semantically correct.

Polymorphic Component

By default, content is rendered inside an <a>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples

A tag backed by an a with an accompanying href.

import { Tag } from '@curology/ui-components-web/react/Tag';

<Tag
  href="#"
  size="{md(default)|lg}"
>
  A tag
</Tag>

A tag backed by a button with an accompanying onClick handler.

import { Tag } from '@curology/ui-components-web/react/Tag';

<Tag ... onClick={handleClick}>
  A tag
</Tag>

A white color variant.

A tag

import { Tag } from '@curology/ui-components-web/react/Tag';

<Tag ... tagType="highlight">
  A tag
</Tag>

A tag in a non-actionable state.

A tag

import { Tag } from '@curology/ui-components-web/react/Tag';

<Tag ... disabled>
  A tag
</Tag>

Name	Type	Default Value	Required	Description
All attributes of a `<a />`
`disabled`	`false \| true`	`false`	No	Should the tag be disabled?
`size`	`"md" \| "lg"`	`'md'`	No	The size of the tag.
`tagType`	`"default" \| "highlight"`	`'default'`	No	Which type should be used for the tag?